CSS Flexbox

Published: 27th of July, 2012
This article is about CSS Flexible Box Layout model, which is, without a shadow of a doubt,
among the most desired CSS features to be implemented into browsers when it comes to layout.
It is the latest addition to layout models and will perform especially good when combined
with media queries in order to produce responsive web designs for multiple screen sizes.

CSS Flexible Box Layout Module is currently a W3C Last Call Working Draft
and it has gone through a couple of profound changes, the first version being introduced back in
2009 already.
W3C Specification:
CSS Flexible Box Layout Module

Layout in CSS

Layout for CSS sucks.
It was never ment to be a layout language, but we've been extremely good with hacks and walkarounds
to produce a fair enough layouts for the web. We did that with four different layout models,
which are familiar to us:

block layout

inline layout

table layout

positioned layout

Each model is represented by a different algorithm to determine the size and position of boxes
(of course you do already know that every element in web design is a rectangular box)
based on their relationships (siblings or ancestor boxes).

Flex layout model is the later addition which was especially designed and is crucial
for more complex web pages and applications. It is a method for automatically
resizing elements and it does so without manually calculating width and height values.

With flexbox, the content container elements (flex items) can be laid out either horizontally or vertically,
which allows us to do vertical centering, for which we all know is notoriously hard to do today
(without either using JavaScript or having 3475 additional wrapper elements with negative margins and
defined top offset and… yea!). The sizes of elements can either flex or shrink automatically
according to the screen size. One use case might be the adjustable button size within the navigation,
each of the button having flexible width according to their parent element.

Perhaps the best feature of this new model is source order independence, which means child element within flex
item can be swapped around dynamically. Prior to that this was almost impossible to achieve.
The feature plays a big role with the combination with media queries in responsive web design, for instance
where we want to display a particular element (most commonly based on their importance)
on the top of the screen on smaller devices and at any other possition (on the sides or at the bottom)
on bigger devices, where there are planty of space. Rearanging the order of elements will become dead simple.

Key characteristic of Flexible Layout Model

To wrap it up or TR/DR;

Box model optimized for user interface design and applications

A method for automatically resizing elements without manually calculating width and height values

The children of the box are laid out either horizontally or vertically

Vertical centering is possible

Children can "flex" their sizes: fill unused space / shrink to avoid overflow

Source-ordering independence: children can be laid out in any direction

Implementation

An element becomes an "flex container" element when display property is set to a value that is
flex or inline-flex.
The following values are avaliable:

#flex {
display: flex | inline-flex;
}

The child elements within flex container are called flex items.

Once an element becomes flex container, there is no use for column-* properties, floats and vertical-align.
They have zero effect. The same applies to absolutely positioned children of a flex container,
which themselves are not flex items.

Note that currenty (27th July, 2012) the lastest specification
(display: flex) is only supported in Chrome Canary,
while the Google Chrome has the previous spec version, display: flexbox.
But this should be deployed soon, and other browsers will follow.

Alignment

The alignment may slightly differ from what we are used to do. We can rely on
'auto' margins
which perform calculations of flex items based on their lengths.
Margin-based alignment has no effect on overflowing elements.

Justify-content and align-content
are used to align flex items among the main axis of the current line within the flex container.
Other two are properties are align-items and
align-self which both work for cross-axis alignment.
The later two work in a similar fashion but in the perpendicular direction.