CSS Flexbox

Published: 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 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.

There are following properties suitable for alignment:

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.

Alignment properties and their values

justify-content
flex-start | flex-end | center | space-between | space-around
align-content
flex-start | flex-end | center | space-between | space-around | stretch
align-self
auto | flex-start | flex-end | center | baseline | stretch
align-items
auto | flex-start | flex-end | center | baseline | stretch

Visual examples of different alignment

The possible values of justify-content and their effects are best described in the picture above.
Source: Axis Alignment: the ‘justify-content’ property.

The possible values of align-items and their effects are best described in the picture above.
Source: Cross-axis Alignment: the ‘align-items’ and ‘align-self’ properties.

Ordering and Orientation

As mentioned earlier, we are able to produce source-independend ordering of the flex items with the following properties: 

flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse

And flex-flow being their shorthand property for the upper two:

flex-flow: <'flex-direction'> || <'flex-wrap'>

And the order: <number> to change order.

Examples of CSS Flexbox

Due to recent changes of the specification and the lack of support I've decided to postpone the demos at least until the proper spec gets implemented in the stable version of Chrome.

Browser Support

Supported by:
  • Chrome Canary
  • Internet Explorer 10+
blog comments powered by Disqus