Seminar: CSS Flexbox

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

---

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

Parent:

display: flex
flex (includes both flex-direction and flex-wrap)
justify-content
align-items
align-content *

Child:

flex (includes flex-grow, flex-shrink, flex-basis)
order
align-self *

* 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

Source: caniuse.com

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.

---

HANDY RESOURCES

A Complete Guide to Flexbox – Chris Coyier

W3C Working Draft

What the flexbox?! – Wes Bos

Flexbox Froggy

Using CSS flexible boxes – MDN

Using Flexbox today – Chris Wright

Flexbox – Sara Soueidan

Flexbugs – Philip Walton

---

REFERENCES