Example One: Flexbox Grid
By making use of flexbox's flex-wrap we can build a grid.
See the Pen Grid with Flexbox by Martin Cooper (@mustbebuilt) on CodePen.
By setting a container element to display: flex, element becomes what is known as a ‘flex container’ and all child elements become ‘flex items’. These flex items will, by default, want to spread out to use the available horizontal space in the flex container . By only adding display: flex to the container all 9 child flex items would be squashed to fit on one line. We don’t want this we want the width of the flex items respected so we need to add a second property to the flex container of flex-wrap and set this to wrap. That way the items are allows to wrap on the horizontal and we get our grid.
Example Two: Evenly Spaced Menu Items
Behind most navigation bars sits a humble HTML list. Then with display:inline or with float these are transformed into horizontal navigation bars.
See the Pen List to Navigation with Float by Martin Cooper (@mustbebuilt) on CodePen.
But try and get the menu items evenly spaced. This means messing about with padding and setting individual values for each menu item – not easy.
With flexbox we can do this:
See the Pen List to Navigation with Flexbox by Martin Cooper (@mustbebuilt) on CodePen.
The menu items are now perfectly spaced. The trick is that the <ul> is set to have a display: flex and thus becomes a flex container. Then we can use a new CSS flex property of justify-content and set it to space-between (other options are available). The justify-content property controls the justification, that is alignment, along what flexbox calls the ‘main’ axis. By default the main axis is the horizontal. The value set by the justify-content property controls the alignment along the main axis of a flex container when the flex items do not use all the available space.
Example Three: Header, Side bar, Content, Footer Layout
The common page layout can be achieved with:
See the Pen Flex Header / Footer Two Colmun Demo by Martin Cooper (@mustbebuilt) on CodePen.
Here flex is just used on container placed around the side bar and main content. They are then 'flexed' with flex used to create a 25/75 split.
Example Four: Centring Vertically
Finally let us use flexbox to centre some content vertically. This is notoriously tricky but flexbox has a solution.
See the Pen Centre Vertically with Flexbox by Martin Cooper (@mustbebuilt) on CodePen.
This is achieved by again using justify-content but this time with a value of center. In this example justify-content works on horizontal alignment of flex items in the flex container.
To centre vertically we use the align-items property and set it to a value of center. In this example align-items works on vertical alignment of flex items in the flex container.
It is important to note that justify-content works on what is called the ‘main axis’ whereas as align-items works on the ‘cross axis’. In our example the main axis is horizontal and cross axis is vertical as our flex container is using the default flex-direction value of row.