27
This behaves much like margin: 0 auto. But with the margin trick, you
must specify an explicit width for the element. Also, we can do more than
just center the navigation with box-pack. There are three other values:
start, end and justify. The start and
end
values do what they do for
box-align. But justify is slightly different.
The justify value acts the same as start if there is only one element.
But if there is more than one element, then it does the following:
• It adds no additional space in front of the first element,
• It adds no additional space after the last element,
• It divides the remaining space between each element evenly.
BOX-FLEX-GROUP AND BOX-LINES
The final two properties have limited and/or no support in browsers, but they
are worth mentioning for the sake of thoroughness.
Perhaps the least helpful is box-flex-group, which allows you to specify
the priority in which boxes are resized. The lower the value (as a positive
integer), the higher the priority. But I have yet to see an implementation of
this that is either useful or functional. If you know different, please say so in
the comments.
On the other hand, box-lines is a bit more practical, if still a little
experimental. By default, box-lines is set to single, which means that all
of your boxes will be forced onto one row of the layout (or onto one column,
depending on the box-orient value). But if you change it to box-lines:
multiple whenever a box is wider or taller than its parent, then any
subsequent boxes will be moved to a new row or column.
Smashing eBook #19│Mastering CSS3│ 169
