CSS flexbox guide

Michael Gearon

Last updated on April 21, 2020

CSS flexible box layout module is a W3C candidate recommendation since the 19 November 2018. The idea behind flexbox is for the children of the container that has the flex applied to laid out in any direction as well as the ability to “flex” their sizes within the container. With flexbox you can also lay out child items in either a horizontal or vertical direction as well as in reverse direction.

Contents of the post

The Container
Declaring flexbox
Flex-direction
Flex-wrap
Flex-flow
Justify-content
Align-items
Align-content
The Children
Order
Flex-grow
Flex-shrink
Flex-basis
Flex
Align-self

The container

This first section will look at the container element. This will cover the display, flex-direction, flex-wrap, flex-flow and justify content properties.

See the Pen Flexbox Guide by Michael Gearon (@michaelgearon) on CodePen.

Switching on flexbox

Using the above example the grey box is our container for our child elements. For us to say that all child elements inside the container should flex we should declare the following on the container:

.container{ display:flex; /*or inline flex*/ }

We then need to decide which way it should stack and with flexbox we have 4 options which are:

Row
Row Reverse
Column
Column Reverse

The flow of the child elements

Again using the above example the pen shows the child elements in both a row and a column by using the following:

 .container{ flex-direction: row /*or row reverse, column, column reverse*/ }

OK so at this point our container is now ‘flexing’ and we have arranged our child items using the flex direction property.

Wrapping

Flexbox by default tries to arrange all the child elements on one line. However when things are starting to get a little tight it may be a good idea to turn to the flex-wrap property. With the flex-wrap property we can use the following:

nowrap – deafult
wrap
wrap-reverse

Flowing

It is starting to expand a little all the properties we are declaring on the contianer. To neaten it up we can use the flex-flow property which a combination of the flex-direction and flex-wrap properties. This an example:

.container{ flex-flow: row wrap; }

Justify Content

See the Pen Flexbox Justify Content by Michael Gearon (@michaelgearon) on CodePen.

Justify content is useful because it tells the child elements what to do with the remaining space of the container. We have 5 choices which are:

flex-start
flex-end
center
space-between
space-around


.container{
justify-content: flex-start /* or flex-end, center, space-between, space-around*/;
}

Align-items

This sets all the child elements to appear a certain way across the cross axis. Later in this post you will find the align-self property which overides this property if declared on a child element. We have the following choices when using the align-items property:

flex-start
flex-end
center
baseline
stretch

Align-content

Similar to align-items but this would apply to multiple lines of child elements. This will not effect when there is only one line of flex items.

flex-start
flex-end
center
space-between
space-around
stretch

The Child elements

We have now covered the container element we will now look at the child elements. There is a lot less to cover with the child elements, this will look at the order, flex-grow, flex-shrink, flex-basis,flex, align-self properties.

The order of the child elements

One of the more intresting properties in my view is the order property. This allows you to change the order of the child elements, which could be useful in combination with Media Queries. For example we change the layout on a phone, tablet or desktop without the need for Javascript or CSS hacking.

See the Pen Flexbox Direction by Michael Gearon (@michaelgearon) on CodePen.

In the above example we have put the fourth child first, the third child second, the second child in the third position and finally the first child in the fourth position. To do this we declare the following on the child elements:


.item{
order: e.g. 1, 2, 3, 4;
}

Flex-grow property

This property took me a while to understand, but it can be really useful to use. Flex-grow allows you to define how much room each child element takes inside a container. If all child elements were set to flex-grow: 1; then they will take up the same space. However if we were to set one to flex-grow: 2; this child would take up double the amount of space as the others. But it does accept unitless value as proportion, which means if we set three child elements as flex-grow: 100; and the fourth as flex-grow: 200; that fourth element will still be double the size.


.item{
flex-grow: 1 /*unitless value*/;
}

Flex-shrink property

This is the same process as grow but instead it shrinks a child element


.item{
flex-shrink: ;
}

Both flex-grow and flex-shrink do not accept negitive numbers

Flex-basis property

This defines the item’s deault size before the remaining space is distrubuted.


.item{
flex-basis: | auto; /*By default it is auto*/
}

Flex property

Similar to the flex-flow property the flex property combines the following properties:

flex-grow
flex-shrink – Optional value
flex-basis – Optional value

By deafult it is 0 1 auto, it is also recommended to use the shorthand property rather than all individually

Align-self