This is a new way of defining how your web page should be laid out that provides greater flexibility for different media types. You define "boxes" to contain your content and these go inside of the flexbox container. How they are then displayed on the screen depends on the size of the browser viewport that they are being displayed in as with this method of defining the page payout you can have the boxes rearrange themselves based on the available space.

Using flexbox you can have your page content in fixed sized containers and still have them fill the available space in the browser viewport. Instead of the containers being resized based on the available space you can have the content boxes display side by side when there's plenty of room and have them move under one another when there is less width available.

Currently only some browsers support the CSS3 standard commands for creating a flexbox layout but most of those that don't will do so if the commands have the -webkit- prefix applied. The following CSS illustrates how to achieve some of the main flexbox functionality in a way supported by all modern browsers.


.flexcontainer {
/* create a flexbox container */
display: -webkit-flex;
display: flex;

/* put the content of the flexbox in a row
(substitute column to put them in a column) */
-webkit-flex-direction: row;
flex-direction: row;

/* move to the top (row) or left (column) */
-webkit-align-items: flex-start;
align-items: flex-start;

/* move to the top (column) or left (row) */
-webkit-justify-content: flex-start;
justify-content: flex-start;

/* to move to the right or bottom use flex-end in place of flex-start
to move to the middle use center instead of flex-start */

/* wrap the content when it doesn't fit - not currently supported by Firefox */
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

/* align the content when using wrap -
valid values are: flex-start, flex-end, space-between, space-around, stretch */
-webkit-align-content: flex-end;
align-content: flex-end;


.bigitem {
/* This will be twice as big as the small item. */
-webkit-flex: 2 0 0;
flex: 2 0 0;
.smallitem {
-webkit-flex: 1 0 0;
flex: 1 0 0;


Not supported in IE9 and earlier (and requires -ms- prefix to work with IE10). Firefox partly supports flexbox including all the above commands. Chrome and Opera both fully supports flexbox (as do Safari, Blackberry and Android provided you use the -webkit- prefix),


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow