Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 267

FIGURE 4-34 A div element set up as a flexbox

All the elements within a flexbox are called flexbox items . You can specify that the flexbox
layout runs horizontally or vertically. You will need to be familiar with some of the key styles
that can be applied to a flexbox and how the browser will interpret them. Table 4-7 outlines
the important styles related to the flow of the child elements.

TABLE 4-7 CSS styles available for a flexible box

Style Option Description

Flows the child elements of the flexbox across the vertical
axis top to bottom.

flex-direction Column

Flows the child elements of the flexbox along the
horizontal axis left to right.

row (default)

Renders the child elements along the vertical axis from the
reverse end bottom to top.

column-reverse

Renders the child elements along the horizontal axis from
the reverse end right to left.

row-reverse

Renders the child elements from the end in relation to the
layout axis set direction.

flex-pack End

Renders the child elements from the start in relation to the
layout axis set direction.

Start

Renders the child elements centered on the layout axis.

center

Evenly spaces the child elements along the layout axis.

distribute