Flexbox Guide

This is my first post on Codepen which looks into Flexbox module, covering most if not all the different CSS properties. This guide is what I have learnt about Flexbox and I hope you find something useful in this post. If you have any suggestions on improving this further just drop me a comment. Thanks, Mike.

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.

Turning 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:

  1. Row
  2. Row Reverse
  3. Column
  4. 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:

  1. nowrap - deafult
  2. wrap
  3. 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

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:

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. 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.

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:

  1. flex-grow
  2. flex-shrink - Optional value
  3. flex-basis - Optional value

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

Align-self

The align-self property allows you to change the deafult alignment of any of the items. In the above example I have used the flex-start, flex-end and stretch properties. One of the really good abilities with flexbox is that it is quite obvious what each value does. With the align-self propety these are all the options:

  1. auto
  2. flex-start
  3. flex-end
  4. center
  5. baseline
  6. stretch


Resources and Extra Guidance


4,711 5 47