HTML and CSS Reference
In-Depth Information
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
header {
display: flexbox;
flex-flow: column;
justify-content: center;
Search WWH ::

Custom Search