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 and .

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.

Introduction

Flexbox layout model consists of two main elements:

  • flex-container – parent element
  • flex-blocks – child elements we are going to experiment with

flexbox-figure-1

So to begin working with flexbox we just need to set 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.

This is how they look by default:
flexbox-figure-2-1

There are six CSS rules for both flex container and flex block. I collected all of them in one table:

Flex container
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.

flexbox-figure-2

Values for

  • 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

Values for

  • 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

flexbox-figure-3

align-items – alignment along the cross axis (vertical by default)
This property acts pretty similarly to a

Values for

  • 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

flexbox-figure-4

flex-wrap – multi-line mode
This property allows the flex blocks to be lined up in more than one line.

Values for

  • 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 ( or )

Values for

  • 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

flexbox-figure-5

flex-flow – shorthand for flex-direction и flex-wrap

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 but the last one has 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

  • 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.

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 combines , and

Browser support

All the browsers except the IE 9 support flexbox layout model. For the IE 10 it is necessary to use prefix.

Conclusion

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?