Flexbox – is literally what many web developers were dreaming about for many years. In a nutshell, this is a new layout model which is supposed to replace old good float and inline-block.
Flexbox gives us the opportunity to operate block elements as we please. We can line them up in a row or column, align them vertically (yes, yes) and horizontally. We can specify how the blocks should behave when the browser window resizes. We can change the order of the blocks and much more.
Opportunities of flexbox are impressive. With that set of features it is most likely that in 1.5 – 2 years (if not earlier), flexbox will be massively used in web developing, which means that now is the perfect time to get used to it.
Flexbox layout model consists of two main elements:
- flex-container – parent element
- flex-blocks – child elements we are going to experiment with
<div style="display: flex;">
So to begin working with flexbox we just need to set display: flex; property for parent container.
Another important thing is to know that each flexbox-container has its main and cross axises. These determine in which direction our blocks will be lined up.
There are six CSS rules for both flex container and flex block. I collected all of them in one table:
|flex-direction||row || row-reverse || column || column-reverse|
|justify-content||flex-start || flex-end || center || space-between || space-around|
|align-items||flex-start || flex-end || center || stretch || baseline|
|flex-wrap||nowrap || wrap || wrap-reverse|
|align-content||flex-start || flex-end || center || space-between || space-around || stretch|
|flex-flow||shortening for flex-direction and flex-wrap||Flex block|
|flex-basis||px, em, %, rem|
|flex-grow||absolute value (e.g 1; 5; 7;)|
|flex-shrink||absolute value (e.g 1; 5; 7;)|
|flex||shortening for flex-grow, flex-shrink and flex-basis|
|align-self||flex-start || flex-end || center || stretch || baseline|
|order||absolute value (e.g 1; 5; 7;)|
In total, there are 12 properties to learn. Let’s take a closer look at them.
CSS properties for flex container (the parent element)
flex-direction – main axis direction
These property defines are flex blocks lined up in a row or in a column.
Values for flex-direction
- row (default): left to right
- row-reverse: right to left
- column: top to down
- column-reverse: down to top
justify-content – alignment along the main axis (horizontal by default)
This property acts pretty similarly to a well known text-align
Values for justify-content
- flex-start (default) – flex blocks are packed toward the start of the main axis
- flex-end: flex blocks are packed toward the end of the main axis
- center: flex blocks are packed toward the center of the main axis
- space-between: flex blocks are aligned with the entire area with a distance between each other
- space-around: flex blocks are aligned to all areas with a distance on the sides
align-items – alignment along the cross axis (vertical by default)
This property acts pretty similarly to a vertical-align
Values for align-items
- flex-start: flex blocks are packed toward the start of the cross axis
- flex-end: flex blocks are packed toward the end of the cross axis
- center: flex blocks are packed toward the center of the cross axis
- stretch (default): flex blocks fill the entire area along the cross axis
- baseline: flex blocks are aligned such as their baselines align
flex-wrap – multi-line mode
This property allows the flex blocks to be lined up in more than one line.
Values for flex-wrap
- nowrap (default): single line (left to right by default)
- wrap: multi-line is allowed
- wrap-reverse: the same as wrap, but reversed
align-content – vertical alignment for lines
This property works only in multi-line mode (flex: wrap; or flex: wrap-reverse;)
Values for align-content
- flex-start: lines are packed toward the start of parent
- flex-end: lines are packed toward the end of parent
- center: lines are packed toward the center of parent
- space-between: lines are aligned over the entire area with a distance between each other
- space-around: rows are aligned to all areas with a distance on the sides
- stretch(default): lines fill the entire area
flex-flow – shorthand for flex-direction и flex-wrap
flex-flow: “flex-direction” “flex-wrap”
flex-flow: row nowrap;
/* does the same as */
CSS properties for flex blocks (the child elements)
flex-basis – block size
This property defines the size (width if the main axis is horizontal or height if it’s vertical) in all the known values: px, em, rem or %.
flex-grow – flex block size in relation to its siblings
This property specifies how a particular block is bigger than its siblings. Use absolute values when working with flex-grow.
For example, if all the blocks have flex-grow:1; but the last one has flex-grow:2; then the last one will be two times bigger than the others.
align-self – alignment of the particular block along the cross axis
This property makes it possible to change the position of a single block along the cross axis (by default it is vertical)
Values for align-content
- flex-start: block is located toward the start of the cross axis
- flex-end: block is located toward the end of the cross axis
- center: block is located toward the center of the cross axis
- stretch (default): block fills the entire area along the cross axis
- baseline: block is aligned such as its baseline aligns
order – makes it possible to change the order of flex blocks
The default value of this property is 0 and the blocks will follow each other according to the order in which they are located in HTML, but we can change it.
<div class="flex-block" style="order: 3">block 1</div>
<div class="flex-block" style="order: 2">block 2</div>
<div class="flex-block" style="order: 1">block 3</div>
In this example, the first displayed block will be block 3, the second one will be block 2, and the last one will be block 1.
flex – shorthand for flex-grow, flex-shrink and flex-basis
This feature combines three other properties like background combines background-color, background-image and background-position
flex: 4 2 200px;
/* does the same */
All the browsers except the IE 9 support flexbox layout model. For the IE 10 it is necessary to use -ms- prefix.
It seems that flexbox layout model with all its features is going to replace old markup techniques such as floats and inline-blocks. The only problem is IE 9 and below. So how long is it going to take until flexbox will take its niche?