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.