It looks like the time has come to dive into Flexbox. This layout technology has been lurking on the fringes of CSS for a while now but with sites like the BBC and with frameworks like Bootstrap 4 using it, now seems like the time to join the fray.
If you been a web designer /developer for a while you’ll have seem many layout trends over the years and may be a little jaded over yet another change. But you’ll also appreciate that techniques such as float are not without their problems. Here are three simple examples to convince you to take a look at flex box.
Example One: The Floated Grid Height Problem
Take this classic floated grid layout.
See the Pen Grid with Float by Martin Cooper (@mustbebuilt) on CodePen.0
By floating to the left, the grid stacks. However, if you have one grid item that has higher content than the other grid items the stacking ‘breaks’. Cue messing around with heights or cutting content to sort out the problem.
With flexbox we can easily fix this:
See the Pen Grid with Flexbox by Martin Cooper (@mustbebuilt) on CodePen.0
Notice how the grid behaves itself and also notice how little CSS that took …. and no need to set heights.
How was this done?
With flexbox we have a new CSS display properties of flex. In fact there are variants on this but more later.
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.0
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.0
The menu items are now perfectly spaced.
How was this done?
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: 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.0
How was this done?
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.
Hopefully this gives you a flavour of flexbox. My next post will dig deeper into these concepts.