HTML and CSS Reference
In-Depth Information
Figure 22-26. The top row is based on the declared width, but the last item fills the bottom row
This might be what you want. But if it isn't, it's important to remember that the flex property's role is to fill
the available space. If you want elements to maintain their defined size, use the align properties described in the
following section instead.
On the other hand, if you want to fill the available space with evenly sized items, adjust the flex-basis
component accordingly. The paragraphs in flex-basis_even.html are styled like this:
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #CCC;
border: 1px solid #FFF;
margin: 0;
padding: 10px;
flex: 1 0 178px;
This sets the flex-basis component to 178px , which is the size the paragraphs need to be to fit into
the 400px space after taking the padding and borders into consideration. This produces the layout shown in
Figure 22-27 .
Figure 22-27. The items are now all the same width
Aligning Flex Items
The Flexible Box Layout module defines four new properties to control the alignment of flex items. But before
describing them, let's look at the way flex layout treats margins. Inside a flex container, margins don't collapse, so
all margins on a flex item are preserved. That's not all. The value of auto takes on a new meaning when applied to
a margin inside a flex container.
The style rule that controls the Buy Now button in books1.html and books2.html (see Figures 22-1 and 22-2
at the beginning of this chapter) looks like this:
article>button {
margin-top: auto;
align-self: center;
I'll explain align-self shortly. Setting margin-top to auto has the effect of pushing the button to the bottom
of the flex container. Consequently, all the buttons are aligned at the bottom of their respective columns.
Search WWH ::

Custom Search