Hi, this page uses Modernizr to detect support for CSS Flexbox which appears to be unsupported by this browser. If you would like to view the demos, check out browser support for CSS flexbox and try using a supported browser.

# Example 1 - Applying flexbox to the display CSS property

In the first example, we can observe what happens to child elements (item 1, item 2 and item 3) when their parent element (the box surrounding the three elements) has the following applied to it: `display: flexbox;`

Note: The parent element has its width set to 90% and the child elements (the three boxes) have their width set at 20%.

Value of the `display` property is currently: ``

Item 1
Item 2
Item 3

The interesting thing about this technique is that no floats whatsoever are being used.

# Example 2 - Orientation

By default, items within a flexbox will flow horizontally. Here's a small example of using `flex-direction: column;` on the parent container.

Note: The parent container of the three elements has a width of 90% (just like in the first example). The child elements (item 1, item 2 and item 3) only have a height of `20px`

Item 1
Item 2
Item 3

The default value for the `flex-direction` property is `row`.

# Example 3 - Alignment on the main axis (flex-pack)

We can use the `flex-pack` property to state how we wish for our items to be aligned. `flex-pack` accepts one of the following four values: `start, end, justify & center`

#### Start

Item 1
Item 2
Item 3

#### End

Item 1
Item 2
Item 3

#### Justify

Item 1
Item 2
Item 3

#### Center

Item 1
Item 2
Item 3

Being able to center items inside a flexbox is a very powerful thing; in the future this may save developers the hassle of having to resort to hacks to achieve centering of an item within a container. The default value for the `flex-pack` property is `start`.

# Example 4 - Alignment on the cross axis (flex-align)

We can use the `flex-align` property to state how we wish for our items to be aligned on the cross axis. `flex-align` accepts one of the following four values: `start, end, center, baseline & stretch`

#### Start

Item 1
Item 2
Item 3

#### End

Item 1
Item 2
Item 3

#### Center

Item 1
Item 2
Item 3

#### Baseline

Item 1
Item 2
Item 3

#### Stretch

Item 1
Item 2
Item 3

Note: All items within example 4 do not have their heights explicitly set. The heights of the parent containers (5 of them) are set at `60px`. The default value for the `flex-align` property is `stretch`.

# Example 5 - Using flex in order to utilise remaining space

Using the `flex` property we can give size preference to items.

Item 1
Item 2
Item 3

Note: The style `flex: 1;` has been applied on each of the three items. The items do not have their widths explicitly set and they do not have any floats applied.

Here's an example of using `flex: 2;` on the 2nd item only (`div:nth-child(2)`) , and keeping `flex: 1;` on the remaining items.

Item 1
Item 2
Item 3

Here's one more example where `div:nth-child(2)` (the 2nd item) is set to `flex: 20;`.

Item 1
Item 2
Item 3

# Example 6 - Ordering

We can use CSS to tell the browser in what order we wish for our flexbox items to be displayed. This is made possible by using `flex-order`. In the example below, our HTML markup has 3 items, where item 1 is first, item 2 is second and item 3 is third. Using the CSS: `flex-order: 1` on the first item (`div:nth-child(1)`) we get the following.

Item 1
Item 2
Item 3

The default value for `flex-order` is `0`.