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 .
Search WWH ::

Custom Search