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

EXAM TIP
The flexbox is oriented based on the flex direction. The flex direction is based on the layout
axis. If the layout of the flexbox is column, the layout axis is vertical. If the flexbox layout is
row, the layout axis is horizontal. For the exam, this is important to understand in order to
know how other properties on the flex grid will be rendered.
Now add some child elements to your flexbox layout:
<div id="flexbox1">
<div></div>
<div></div>
<div></div>
</div>
Just adding empty <div> elements will not be enough to show content. You also need to
add some styles so that the flexbox layout will show your child elements. Here are the styles
to add:
#flexbox1 > div {
min-width: 80px;
min-height: 80px;
border: 1px solid black;
margin: 5px;
}
#flexbox1 > div:nth-child(1) {
background-color: green;
}
#flexbox1 > div:nth-child(2) {
background-color: yellow;
}
#flexbox1 > div:nth-child(3) {
background-color: red;
}
This code produces the output in Figure 4-35.
FIGURE 4-35 A flexbox with content elements set up