HTML and CSS Reference
In-Depth Information
FIGURE 7.7 Our default, simple
layout block is looking OK
so far.
CONTROLLING FLEXBOX CHILD FLOW DIRECTION
Let's begin by briefly looking at an example of laying out some content using Flex-
box. (See the file our-friends-flexbox.html in the chapter7 code download folder.)
Three <articles> with varying content are contained in a <section> , and the
<section> has been set to be laid out as a flexbox with this code:
section {
: ;
: ;
}
article {
: ;
padding: 1rem 2rem;
}
This causes the children to be laid out in a horizontal row ( Figure 7.7 ).
If you wanted to lay out your child elements vertically instead in a column,
you could do this:
section {
: ;
: ;
}
 
Search WWH ::




Custom Search