HTML and CSS Reference
In-Depth Information
Flexbox also makes another property available—
align-items
, which aligns
the children along the cross axis, whichever direction that is at the time. You can
use this to center the child elements horizontally, like so:
FIGURE 7.11
Flexbox makes
centering and equally spacing
elements inside their container
very easy.
header {
display: flex;
justify-content: center;
flex-pack: justify;
align-items: center;
}
Figure 7.11
shows the result of this addition.
NOTES:
Possible values for
align-items
are
flex-start
,
flex-end
,
center
,
baseline
, and
stretch
.
There is also a property,
align-self
, which takes the same
values as
align-items
.
align-self
, when applied to indi-
vidual children of a flexbox, can be used to override behavior
set on all children by
align-items
.
