CSS Flexbox Layout is a new layout mode in CSS3 that helps us align and order items with dynamic or unknown size, making responsive web design less anally painful. Positioning the elements with flexbox is a lot easier than using ancient methods like floating blocks and tables. For the moment the Flexbox spec is finished and, thanks to Allah, has excellent browser support.

Before I start describing the flexbox properties let me explain how this bad boy works. The flex layout includes the parent container referred as flex container and its children that are called flex items.

In order to start using Flexbox, let’s create a simple markup:

<div class="container">
    <div>I am a flex item</div>
    <div>I am a flex item</div>
    <div>I am a flex item</div>

All we need to do now is to declare the “.container” as a flex-container:

.container {
    display: flex;

With this simple line the ‘.container’ is now displayed as a flex-container and all of its immidiate children became flex-items.

By default, all flex items try to fit in a single line, even if there are dozens of them, and if they don’t fit, they will overflow the parent container.

Adding flex-wrap: wrap; to the container enables flex items to wrap onto multiple lines if needed:

We can decide how much space each item should take by setting flex property to it:

.flex-item {
    flex: 1;

flex: 1; sets the width of a single item equal to others’.

Now if we set flex: 2 to one of the items, it will become twice wider than all other elements.

.flex-item:nth-child(2) {
    flex: 2;

Flex items can be laid out in a column

by setting flex-direction property to the parent container. Flex-direction may be equal to row, row-reverse, column or column-reverse.

Remember that row and row-reverse are affected by the writing direction of the block, which means that row-reverse will actually lay out from left to right if the text direction is set to right-to-left, and vice versa.