HTML and CSS Reference
In-Depth Information
Multiple Rows or Columns
To display multiple rows or columns in a flex container, set
flex-wrap
to
wrap
. For example, the style for the
container<div>
in row_wrap.html has been amended from Listing 22-2 like this:
#container {
display: flex;
flex-wrap: wrap;
border: 1px solid #000;
width: 400px;
}
As Figure
22-9
shows, the final item is now displayed on a separate row.
Figure 22-9.
The flex container now displays multiple rows
The following shorthand
flex-flow
has exactly the same effect:
flex-flow: wrap;
To display multiple columns, set
flex-direction
to
column
and
flex-flow
to
wrap
. The styles for the
container<div>
in column_wrap.html have been given a height of
120px
and changed like this:
#container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #000;
width: 400px;
height: 120px;
}
As a result, the fourth item is moved to a second column, as shown in Figure
22-10
.
Figure 22-10.
The flex container has a fixed height, so the last item is moved to a new column
