186 Chapter 15
Declaring the Flexible Box Model
The first step in using Flexbox is to create the flex container—the parent ele-
ment that will create a new formatting context for its contents. To declare a
flex container, you simply use a new value for the display property:E { display: flex; }This creates a block-level flex container; you can use the alternate
inline-flex value if you prefer an inline-level container.
Now you can add flex items to the flex container. A flex item is any child
of the flex container, which is subject to the formatting context created by
the container. For example, in the following code if #container is set as the
flex container, the two child items will become flex items:<div id="container">
<div id="a">...</div>
<div id="b">...</div>
</div>This combination of markup and CSS is shown in Figure 15-1. Notice
that the two elements are of equal width and laid out next to each other,
without needing to use floats or positioning properties. By default, flex
items are laid out in the direction of the document text—that is, from
left to right for languages such as English, from right to left for languages
such as Arabic (specified with the dir HTML attribute or direction CSS
property), and from top to bottom for languages such as Japanese (set
with the text-direction CSS property, but not yet broadly supported).Figure 15-1: Child items of a flex container are laid out horizontally by default.noTe All of the examples throughout the rest of this chapter use the left-to-right direction,
unless otherwise stated.To alter the default layout direction, you can use the flex-direction
property on the container. The default value row lays items out in a row,
whereas a value of column lays them out from top to bottom in a column.E {
display: flex;
flex-direction: column;
}