Posted 7th March 2016 | By Andy Taylor, Studio Manager

Flexbox is the newest member of the CSS layout family and is formally named the Flexible Box Layout Module by the W3C. It can be used to easily position elements with minimal code.

In today's blog post I am going to cover the different properties that can be applied to the parent container, then in the next post we will look at the properties of the flexbox items.

Flexbox Intro

Flexbox is the newest member of the CSS layout family and is formally named the Flexible Box Layout Module by the W3C. It can be used to easily position elements with minimal code. In todays blog post I am going to cover the different properties that can be applied to the parent container, then in the next post we will look at the properties of the flexbox items.

Flexbox Properties

flex

The first step to using flexbox is to declare the flexbox container by adding the following code.

.flex-container{ display: flex; }

The flexbox model has now been initiated and the child items are now flex items.

flex item
flex item
flex item

justify-content

The alignment and spacing of the items can be manipulated by using the justify-content property on the parent element. See the examples below for what happens:

.flex-container { display: flex; justify-content: flex-start; }

flex item
flex item
flex item

.flex-container { display: flex; justify-content: flex-end; }

flex item
flex item
flex item

.flex-container { display: flex; justify-content: center; }

flex item
flex item
flex item

.flex-container { display: flex; justify-content: space-around; }

flex item
flex item
flex item

.flex-container { display: flex; justify-content: space-between; }

flex item
flex item
flex item

flex-direction

The direction of the flexbox items can be manipulated using the flex-direction property. With this you can reverse the order and/or layout, placing them in a row or column.

.flex-container { display: flex; flex-direction: row; }

flex item 1
flex item 2
flex item 3

.flex-container { display: flex; flex-direction: row-reverse; }

flex item 1
flex item 2
flex item 3

.flex-container { display: flex; flex-direction: column; }

flex item 1
flex item 2
flex item 3

.flex-container { display: flex; flex-direction: column-reverse; }

flex item 1
flex item 2
flex item 3

align-items

Align items is used to layout the flexbox items on the cross axis. The opposite axis than justify-content.

.flex-container { display: flex; align-items: flex-start; }

flex item
flex item
flex item

.flex-container { display: flex; align-items: flex-end; }

flex item
flex item
flex item

.flex-container { display: flex; align-items: center; }

flex item
flex item
flex item

.flex-container { display: flex; align-items: stretch; }

flex item
flex item
flex item

.flex-container { display: flex; align-items: baseline; }

flex item
flex item
flex item

Flexbox Browser Support

It would be great if we could just implement new HTML and CSS properties without a care in the world, but life isn't that easy. However, to make life a little easier for you, I have taken information from caniuse.com to show what browsers currently support flex.

flexbox browser support

According to Can I Use, global support for flexbox is around 95.31% and 80.77% with unprefixed CSS.

Learning Flexbox

If you are interested in learning flexbox layout then Flexbox Froggy is fun way to get to learn it. The frog puns after the completing the 24 levels are worth it alone.

Alternative resources you might be interested in include:-

Part 2

Keep an eye out for part 2 of this series of Flexbox related articles.

Written by Andy Taylor, Web Developer at ExtraMile Communications.

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people's creativity. Each post in this series is one staff member's take on the world of web, design and things online. We hope you enjoy it.

Andy

About Andy | Meet our Studio Manager

Excitable Studio Manager/Lead Developer