HTML and CSS Reference
In-Depth Information
■
Although flex layout gives you almost limitless control over the order in which items are displayed, the
source order of the underlying HTML remains unchanged. For accessibility and search engine indexing, the HTML
source order should follow a logical sequence. Flex layout is not intended to fix problems with poorly structured
documents. Its primary role is to improve visual layout.
Caution
Choosing Rows or Columns
A flex container can display its contents in rows or columns. To demonstrate various options, the examples in the
following sections are based on the styles and HTML markup in Listing 22-2.
Listing 22-2.
Example Code for Flex Layout
<style>
#container {
display: flex;
border: 1px solid #000;
width: 400px;
}
p {
margin: 10px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
<div id="container">
<p>Flex item 1</p>
<p>Flex item 2</p>
<p>Flex item 3</p>
<p>Flex item 4</p>
</div>
Single Row
The default values for
flex-direction
and
flex-wrap
are
row
and
nowrap
, respectively. So, if you omit them
both, as in Listing 22-2 and row.html, the contents of the flex container are displayed as a single row in the same
order as the underlying HTML source, as shown in Figure
22-6
.
Figure 22-6.
A default flex container displays a single row of items in the same order as the HTML source
Because the
<div>
is a flex container, all its child paragraphs are automatically treated as flex items. You
don't need to change their
display
property. The effect is very similar to floating the paragraphs left. However,
the content of each paragraph has been wrapped because the flex container isn't wide enough to display all the
paragraphs without doing so. If the paragraphs were floated, the final one would drop to the next line. But that's
not possible in a flex container unless you explicitly define it to be multi-line.
