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:
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.
Here are all of the properties available for Flexbox. The best way to learn about Flexbox behavior is to play and combine these. 🙂
flex – element is rendered as block
inline-flex – element is rendered as inline block
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 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
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
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
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
This property contains two values: flex-direction and flex-wrap.
For example, flex-flow: row wrap;
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.
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 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.
Note: These are basic examples with no vendor prefixes.
Now I will show you how to create a cool menu using Flexbox.
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.
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.