View my presentation slides on CSS flexbox.
To highlight the main terms used in flexbox:
important terminology are in bolded text
properties are in green
values are in orange
WHAT IS CSS FLEXBOX?
CSS flexbox or ‘Flexible Box Layout Module’, is a set of CSS properties that allow items to dynamically adjust to best fill the space in a container.
The layout module first came out in 2009, and has had two updates since—one in 2011, and one in 2012—which is the version we have today. It is currently at the Last Call Working Draft stage, meaning that flexbox is not too far away from Candidate Recommendation!
Due to very poor browser support when it first came out, it’s not until recently that people have started seriously considering and using flexbox as a means of creating more complexed page layouts. Flexbox is direction-based, meaning that it can layout/align items both horizontally and vertically, making web designers’ lives easier and mark-up cleaner!
It’s also an advantage over floats, because you don’t need to clear them—‘nor do the flex container’s margins collapse with the margins of its contents‘.
So all-in-all, I’d say it’s looking good for CSS flexbox! In the next couple of sections I’m going to run through the some of the basics of flexbox by looking at a few real-life examples.
THE AXES AND FLEX-DIRECTION
One of the fundamental ideas of flexbox is that it can align items according to two axes—the main axis (the primary axis), and the cross axis (the secondary axis). In order to determine the direction of both axes, you need to set your flex-direction to one of these values:
row (default) | main axis goes from left to right, cross axis goes from top to bottom
row-reverse | main axis goes from right to left, cross axis remains the same
column | main axis goes from top to bottom, cross axis goes from left to right
column-reverse | main axis goes from bottom to top, cross axis remains the same
You can see that the boxes fill up the container from left to right. If it was set to row-reverse, the boxes would fill up the container from right to left.
The boxes are now stacked on top of each other filling the container from top to bottom. If it was set to column-reverse, the boxes would fill up the container from bottom to top.
HOW TO MAKE A FLEX CONTAINER
By applying display: flex to the parent element (white box), this automatically turns it into a flex container. Any child elements within it become a flex item (coloured boxes).
EXAMPLE 1: PERFECTLY CENTERING ITEMS
Let’s have a look at the first example of what you can do with flexbox. Previosuly, it was pretty difficult to perfectly centre an item on a page without doing a few CSS hacks. However, with flexbox, this is all you need:
Just three lines of CSS—nice and simple! We covered the display property above, so we’ll move onto the following two.
justify-content (apply to parent element)
justify-content allows you to align items on the main axis, so depending what you’ve set flex-direction to, it could be aligning horizontally or vertically. The property has five values which are listed below:
flex-start (default) | aligns items at the start of the container
flex-end | aligns items at the end of the container
center | aligns items in the centre
space-between | distributes the items equally in the container
space-around | gives equal spacing around the items
align-items (apply to parent element)
align-items allows you to line up items using the cross axis, so if flex-direction is set to row, the cross axis will be from top to bottom. This property also has five values, listed below:
flex-start | aligns items at the start of the container
flex-end | aligns items at the end of the container
center | aligns items in the centre
stretch (default) | stretches the items along the cross axis of the container
baseline | lines up the text within the items on the baseline of the used font
EXAMPLE 2: SMALL SCALE LAYOUTS
In the second example, we can see how flexbox’s ability to alter an item’s width and height can be useful for flexible small-scale layouts.
Take a look at this live demo. You can see that even without the use of media queries, the boxes are able to dynamically adjust when the screen-size changes.
CSS for the demo is provided in the image below:
New properties used here are: flex-flow and flex. Both are actually shorthands for a set of properties.
flex-flow: <flex-direction> | <flex-wrap>
flex: <flex-grow> | <flex-shrink> | <flex-basis>
flex-wrap (apply to parent element)
flex-wrap allows flex items to go onto multiple lines when there is not enough space within the container. The property has three values:
nowrap (default) | items will all try and fit onto one line
wrap | items will wrap onto a new line, filling up the container according to the direction of the main axis
wrap-reverse | same as wrap, but items fill up the container in the opposite direction of the main axis
If flex-direction is set to row, then the wrapped items will appear on a new row below, and if set to row-reverse then it appears on a new row above. If flex-direction is set to column or column-reverse, then the wrapped items will appear as new columns either before or after the original column.
flex-grow (apply to child element)
flex-grow deals with how the width or height of an item should change when there is extra space within the container. If we take a look at the image below, when flex-grow is set to 1, each item gets one portion of the extra space given to it, however when box 2 is set to flex-grow: 4 then, it will get 4 portions of space given to it compared with box 1 and 3, which get 1 portion.
flex-shrink (apply to child element)
flex-shrink works in the same way, except that it determines how the width or height an item should change when there is not enough space within the container. So for example, when the original container shrinks down past the default widths of the boxes and all boxes are set to 1, each box gives up 1 portion of space. When box 3 is set to have a flex-shrink of 10, then it gives up 10 portions of space.
flex-basis (apply to child element)
flex-basis defines the default width or height of a flex item before the remaining space within a container is distributed. The width or height of a flex-item will usually be as wide or high as its content, so by setting a flex-basis it will allow the item to always try and remain at the specified unit—be it pixels, pts, ems or %. Its default value is auto, which means that it will look at whether your flex item already has a width or height property and go according to that.
EXAMPLE 3: RE-ARRANGING ITEMS IN LAYOUTS
In this final example, we can see how flexbox can easily re-arrange items within a layout. This works particularly well with responsive design, as it’s often the case that you’ll want to place a side bar above or below the body text when the screen-size gets smaller. With flexbox, it literally just means ordering the boxes.
Take a look at the live demo and try it out for yourself; you can see that the two side nav bar jumps above the header when the screen size goes below 800px. (You probably wouldn’t do this, but this is just as an example of how the order property works!)
order (apply to child element)
order puts any item with a value greater than 0 at the end of the line. Think of the container as an index, and any items within it have a default value of 0—if you remember this, then you”ll have the order property sussed! It works with negative numbers too, but any item with a value less than 0 will be put at the beginning of the line. Take a look at the image below:
FULL LIST OF PROPERTIES
flex (includes both flex-direction and flex-wrap)
flex (includes flex-grow, flex-shrink, flex-basis)
* I didn’t manage to cover these two properties in the examples above, but for more information on these, check out Chris Coyier’s Complete Guide to Flexbox.
Browser support has improved hugely for flexbox over the years, with the majority of browsers now supporting the layout module. However, IE still poses a problem as 8 and 9 don’t support it, and 10 and 11 only partially support it, meaning that you’ll need to use old syntax. iOS 8.4 and Android 4.3 also need to have the -webkit- prefix.
There are also some known bugs that happen when flexbox is used in some browsers; Philip Walton has produced a GitHub project Flexbugs that lists and provides handy workarounds for these bugs.
A Complete Guide to Flexbox – Chris Coyier
Using CSS flexible boxes – MDN
Using Flexbox today – Chris Wright
Flexbox – Sara Soueidan
Flexbugs – Philip Walton
Archibald, J. (2014). Don’t use flexbox for overall page layout. [online] Jakearchibald.com. Available at: https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ [Accessed 1 Feb. 2016].
Bos, W. (2016). Free Flexbox Video Series. [online] What The FlexBox?! Video Series. Available at: http://flexbox.io/#/view/CFgeJq4l1YM [Accessed 30 Jan. 2016].
Bos, W. (2016). Solve Your Layout Problems With Flexbox. net, (275), pp.84-89.
Brennan, P. (2015). CSS Flexbox Explained. [online] front-end tricks. Available at: https://frontendtricks.wordpress.com/2015/03/06/css-flexbox-explained/ [Accessed 1 Feb. 2016].
Coyier, C. (2016). A Complete Guide to Flexbox. [online] Css-tricks.com. Available at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [Accessed 1 Feb. 2016].
Fioritto, S. (2016). The Ultimate Flexbox Cheat Sheet. [online] Sketchingwithcss.com. Available at: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html [Accessed 3 Feb. 2016].
Mozilla Developer Network, (2015). Using CSS flexible boxes. [online] Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes [Accessed 2 Feb. 2016].
Storey, D. (2013). Designing CSS Layouts With Flexbox Is As Easy As Pie – Smashing Magazine. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/ [Accessed 3 Feb. 2016].
W3.org, (2015). CSS Flexible Box Layout Module Level 1. [online] Available at: https://www.w3.org/TR/css-flexbox-1/ [Accessed 1 Feb. 2016].
Walton, P. (2015). Normalizing Cross-browser Flexbox Bugs — Philip Walton. [online] Philipwalton.com. Available at: http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ [Accessed 1 Feb. 2016].
Walton, P. (2016). Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS. [online] Philipwalton.github.io. Available at: https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ [Accessed 3 Feb. 2016].
Wright, C. (2015). Experiment: Using Flexbox Today. [online] Chris Wright Design. Available at: https://chriswrightdesign.com/experiments/using-flexbox-today/ [Accessed 2 Feb. 2016].
zomigi.com, (2015). Using Modernizr with Flexbox. [online] Available at: http://zomigi.com/blog/using-modernizr-with-flexbox/ [Accessed 2 Feb. 2016].