Flexible Box Layout
Part 2. Modern Properties
The old implementation of flexible layout model is efficient enough to create impressive design of "elastic" Web pages. However, old flexbox properties do not allow Web authors to override the default alignment of individual flex items. Another drawback is too rigid distribution of available space when the prefixed box-flex property is used: it does not take negative free space into account. Modern flexible box implementation is based on the W3C Candidate Recommendation:
| property | supported values |
|---|---|
| align-content | flex-start flex-end center space-between space-around stretch |
| align-items | flex-start flex-end center baseline stretch |
| align-self | auto flex-start flex-end center baseline stretch |
| flex | flex is a shorthand property for setting flex-grow flex-shrink flex-basis |
| flex-basis | flex-basis is used to calculate the initial size of a flex item before flex grow and flex shrink factors are applied; it can be expressed as a length unit, a percentage value or the auto keyword |
| flex-direction | row row-reverse column column-reverse |
| flex-flow | flex-flow is a shorthand property for setting flex-direction flex-wrap |
| flex-grow | flex grow factor |
| flex-shrink | flex shrink factor |
| flex-wrap | nowrap wrap wrap-reverse |
| justify-content | flex-start flex-end center space-between space-around |
| order | integer value |
align-content
Property is used to align a flex container's lines along the cross-axis. Property will have no effect if the container has only a single line.
<style>
#flex-container {
display: -webkit-flex;
border: 1px solid red; width: 145px; height: 250px;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
-webkit-align-content: center;
}
</style>
...
<div id="flex-container">
<div><img src="red-ball.png"/></div>
<div><img src="green-ball.png"/></div>
<div><img src="blue-ball.png"/></div>
<div><img src="red-ball.png"/></div>
<div><img src="green-ball.png"/></div>
<div><img src="blue-ball.png"/></div>
<div><img src="red-ball.png"/></div>
<div><img src="green-ball.png"/></div>
<div><img src="blue-ball.png"/></div>
</div>
 | main axis is horizontal cross axis is vertical flex container has multiple lines of content lines are aligned with the center of the container's cross-axis |
Let's compare:
 |  |  |  |
| flex-start | flex-end | space-between | space-around |
align-items
align-self
Generally, properties are used together: the align-items CSS property aligns flex items along the cross axis, whereas the align-self property allows the Web author to override the general alignment in regard to individual items:
<style>
#flex-container {
display: -webkit-flex;
border: 1px solid red; width: 145px; height: 145px;
-webkit-flex-direction: column;
-webkit-align-items: flex-end;
}
#green-ball {
-webkit-align-self: flex-start;
}
</style>
...
<div id="flex-container">
<div><img src="red-ball.png"/></div>
<div id="green-ball"><img src="green-ball.png"/></div>
<div><img src="blue-ball.png"/></div>
</div>
 | main axis is vertical cross axis is horizontal flex items are placed at the end of the cross axis flex item with the #green-ball ID has an overridden alignment and is placed at the beginning of the cross axis |
flex
flex-basis
flex-grow
flex-shrink
Properties are used to define the amount of flex items stretching or shrinking. The flex-basis property specifies the initial size of a flex item, then the flex grow and flex shrink factors are applied:
<style>
#flex-container {
display: -webkit-flex;
-webkit-flex-direction: row;
}
#red-flex-item {
background-color: rgba(255, 0, 0, 0.5);
-webkit-flex-basis: auto;
-webkit-flex-grow: 1;
-webkit-flex-shrink: 1;
}
#green-flex-item {
background-color: rgba(0, 255, 0, 0.5);
-webkit-flex-basis: auto;
-webkit-flex-grow: 2;
-webkit-flex-shrink: 1;
}
#blue-flex-item {
background-color: rgba(0, 0, 0, 255);
-webkit-flex-basis: auto;
-webkit-flex-grow: 9;
-webkit-flex-shrink: 1;
}
</style>
...
<div id="flex-container">
<div id="red-flex-item"><img src="red-ball.png"/></div>
<div id="green-flex-item"><img src="green-ball.png"/></div>
<div id="blue-flex-item"><img src="blue-ball.png"/></div>
</div>
In the example above, flex-basis is auto. It means that flex basis is set to the initial main size of a flex item. The main size depends on the main axis direction: if the main axis is horizontal, then the main size of a flex item is its CSS width property. Flex grow factors are 1, 2 and 9: they are applied when positive free space is distributed. Shrinking factor is set to its default value of 1. It should be noted that
-webkit-flex-basis: auto; -webkit-flex-grow: 9; -webkit-flex-shrink: 1;
can also be expressed as
-webkit-flex: 9 1 auto;
flex-flow
flex-direction
flex-wrap
flex-direction sets the direction of a flex container's main axis, flex-wrap indicates how many lines will be displayed in the container and affects the layout of flex items along the cross axis. flex-flow is a shorthand CSS property utilized to set both flex direction and wrap behavior: <style>
#flex-container {
display: -webkit-flex;
max-width: 145px;
-webkit-flex-direction: row-reverse;
-webkit-flex-wrap: none;
}
</style>
...
<div id="flex-container">
<div><img src="red-ball.png"/></div>
<div><img src="green-ball.png"/></div>
<div><img src="blue-ball.png"/></div>
</div>
The row-reverse value makes the flex items to be laid out in the reverse direction along the main axis which is horizontal in this case. WebKit-based browsers can use none value instead of nowrap in defining the flex-wrap CSS property. Another way to describe the container's axes is to use the flex-flow shorthand:
-webkit-flex-flow: row-reverse none;
is equivalent to
-webkit-flex-direction: row-reverse; -webkit-flex-wrap: none;
justify-content
justify-content is similar to the prefixed box-pack from the old flexbox implementation: it is employed to align flex items along the main axis.
order
order assigns flex items to ordinal groups. Items with lower ordinal group values are displayed first.
