• How to use CSS3 Flexbox

    How to use CSS3 Flexbox

    By: Emil Firšt

    Did you ever wonder if there is a simpler and more convenient way to handle items with unknown width inside of a row/column without floating? Flexbox layout mode is flexible way of displaying items in a container. It may seem to be new model but it’s been here since 2009, and many sites use it, but it’s still not considered “mainstream”. The older browsers still experience some support problems and need vendor prefixes.

    If you don’t have any experience with Flexbox, then you’re in the right place. I am also new to Flexbox but I’ve tried to provide important information and other useful things here in this blog. Also I want to show you practical ways of using it in your projects.

    How does Flexbox work?

    So how does Flexbox work? Let’s say we want to have a few items (we don’t know how many items there will be later) in a single row and we want them to stretch along the entire screen. Each item has an unknown width, which dynamically changes depending on the number of the items. Here is where the Flexbox concept jumps in! As you can see in the example below, the Flexbox container uses free space within its items and adopts to their width:

    img-1

    img-2

    This is only one possible application of Flexbox. I will show you more examples later.

    What is the HTML structure of Flexbox? It is really simple. You only need to create one wrapper element, which is a Flexbox container, and put items inside of it. Items automatically take on the properties of the Flexbox items. Items can be divs, anchors, list items, images, etc. Whatever you want to put as your items will work, it won’t affect the concept.

    
    <div class="flexbox-container">
       <a href="" class="item">Home</a>
       <a href="" class="item">Who we are</a>
       <a href="" class="item">What we do</a>
       <a href="" class="item">Blog</a>
       <a href="" class="item">Shop</a>
       <a href="" class="item">Contact</a>
    </div>
    
    

    The Flexbox items’ behavior is managed through different properties of the container and the item itself. The basic property, which defines the Flexbox container, is display with value flex. You can also use inline-flex as well. Other properties define direction, justifying content, aligning items, wrapping etc. Take a look at all available properties below.

    Properties

    Here are all of the properties available for Flexbox. The best way to learn about Flexbox behavior is to play and combine these. :)

    display
    flex – element is rendered as block
    inline-flex – element is rendered as inline block

    flex-direction
    This property defines the direction of Flexbox items

    row (default) – flex items will be lined up in a row from left to right
    row-reverse – flex items will be lined up in a row from right to left
    column – flex items will be lined up vertically
    column-reverse – flex items will be also lined up vertically but reversed

    justify-content
    Justify content helps to align items and disposes of free space around them.

    flex-start (default) – flex items will be placed at the beginning of the container
    flex-end – flex items will be placed at the end of the container
    center – flex items will be centered
    space-between – flex items will have free space between each other
    space-around – flex items will have free space before and after

    align-items
    This property is similar to justify-content but it aligns items in a container on a vertical axis.

    stretch (default) – flex items will fit the container
    flex-start – position flex items at the top of container
    flex-end – position flex items at the bottom of container
    center – position flex items to the vertical center of container
    baseline – position flex items to the baseline of container

    flex-wrap
    This is very useful property if you want to break flex items into the new line.

    nowrap (default) – flex items will stay in one line and use all free space
    wrap – flex items will break into the new line if there is not enough space in the line
    wrap-reverse – the same as wrap but reversed

    align-content
    The property is similar to align-items but the difference is that it aligns flex lines, not the items.

    stretch (default) – flex lines will be stretched to use all free space of the container
    flex-start – flex lines will be packed to the start of the container
    flex-end – flex lines will be packed to the end of the container
    center – flex lines will be packed to the center of the container
    space-between – flex lines will be evanly arranged inside of container where the first item will be at the beginning and the last item will be at the end of the container
    space-around – flex lines will be also evanly arranged inside of container but there will be space around each item

    flex-flow
    This property contains two values: flex-direction and flex-wrap.
    For example, flex-flow: row wrap;

    order
    The order property is a property for flex items, not for flex containers. With order you can specify the items order. Its value is integer.

    order: -1;

    align-self
    This property is also for flex items and does the same as align-items but to specific flex items.

    auto – in case the element has its parent, it inherits align-items property. If it hasn’t it takes the stretch property
    stretch – the item will fit the container
    flex-start – the item will be positioned at the beginning of the container
    flex-end – the item will be positioned at the end of the container
    center – the item will be positioned at the center of the container
    baseline – the item will be positioned at the baseline of the container
    inherit – the item will inherit the property from its parent
    initial – the item will be set to its default value

    flex
    flex property can be applied to flex items only. It defines the length of a flex item relating to the other flex items. For example, there are 3 items in a row. Each item has flex: 1; except the third one which has flex: 2;. That means that the third item will have the length of two flex items.

    Examples

    Note: These are basic examples with no vendor prefixes.

    Menu

    Now I will show you how to create a cool menu using Flexbox.

    See the Pen Flexbox menu by Emil (@efirst) on CodePen.

    Grid

    You can also create grid easily. This grid is very simple. In this case the “row” is a Flexbox container, which contains “item” elements, which are Flexbox items. One container equals one row. If you want more rows just add it below the last row. You can put as many item as you want inside.

    See the Pen Flexbox grid by Emil (@efirst) on CodePen.

     

    Browser support

    For some browsers you will need to add the -webkit- or -moz- prefix.
    Since Flexbox appeared in 2009 there is an old and new syntax. The older ones are display: box; and display: flexbox;

     

    Chrome Firefox Safari Opera
    20- (box) 2-21 (box) 3.1+ (box) 12.1+ (flexbox)
    21+ (flexbox) 22+ (flexbox)    

     

    IE iOS Android
    10 (flexbox) 3.2+ (box) 2.1+ (box)
    11+ (flexbox) 7.1+ (flexbox) 4.4+ (flexbox)

     

    I hope you have learned something new! :) If you have questions don’t hesitate to drop a comment or two.

HAVE A PROJECT FOR US?