HTML and CSS Reference
In-Depth Information
ALIGNING FLEXBOX CHILDREN
Flexbox also rocks big time when you want to align your flexbox children at the
start, middle, or end of a column of content, for example. You can use the
justify-
content
property to align your children along the main axis in whichever direc-
tion you've set that to be. The possible values are
flex-start
,
flex-end
,
center
,
space-between
, and
space-around
.
I've used this to lay out the
<header>
content of my example. I wanted the
content all centered, horizontally and vertically. This kind of layout is usually quite
di
cult to do, especially vertically (because you can't rely on the old
margin: auto
trick for centering), and you usually end up messing around with positioning and
inaccurate measurements.
To s t a r t w i t h , y To u s h To u l d s e t y To u r
<header>
to be laid out like a flexbox in a
vertical column:
header {
: ;
: ;
}
By default this will lay out your elements in a column aligned to the left hori-
zontally and sort of near the top vertically. Let's first align them in a better position
vertically:
header {
display: flexbox;
flex-flow: column;
justify-content: center;
}
