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.