flexible boxes

What Is CSS Flexible Box Layout?

CSS 2.1 defined four layout modes — block, inline, table, and absolutely positioned.

This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.

http://www.w3.org/TR/css3-flexbox/

WHAT IS CSS FLEXIBLE BOX LAYOUT?

What is Flex-Box good for?

Filling Space
Stacking
Re-positioning
Wrapping

Flexibility

Take this example layout

Flexibility

We can tell child 3 to expand

to fill the remaining space

Flexibility

Or tell children 2 and 3 to play nice

and share the remaining space!

Why would we use it?

Adaptive stretching designs
Variably sized content
Multi-column layouts
It's Cool!

Terminology

Flex Container: a parent container element

Flex Item: a child element with CSS flex properties

Cross Axis: the axis opposite the stacking axis

(eg, vertical if we are stacking horizontally)

Collapsing: a Flex Item can be made invisible

without disrupting the container's Cross Axis size

Implementations

There are at least 3 versions out there

/* OLD - (W3C Working Draft, July 2009) */

display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */

display: -moz-box;         /* Firefox 19- (buggy but mostly works) */

/* IN-BETWEEN - (W3C Working Draft, March 2012) */
display: -ms-flexbox;      /*  IE 10 */

/* CURRENT W3C Candidate Recommendation Sept 2012 */

display: -webkit-flex;  /* Chrome */

display: flex;          /* Opera 12.1, Firefox 20+ */

Implementations

You can build a stack that is cross-compatible

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;