CSS Click Chart

Flexible Box Model

A layout module that makes it easier to align, center, space, distribute, etc., multiple elements in a layout.

Specification

CSS Flexible Box Layout Module Level 1

Example Code

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

.flexitem {
  flex-grow: 1;
}

.flexitem:first-child {
  order: 3;
  flex-grow: 2;
}

Live Demonstration

With flexbox, it's easier to align, space, and center multiple elements. The numbers represent source order for each item.

1

2

3

4

Browser Support

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles