HTML and CSS Reference
In-Depth Information
Note that even though element 5 is now the first displayed, it's still the
fifth element as far as the
CSS
is concerned. Element 2 and element 4
have larger
box-flex
values, even though they're now shown as the
third and fifth elements.
Although flexboxes are horizontal by default, they
can also be set to be vertical:
div {
width: 5em;
height: 600px;
box-orient: vertical;
}
Note that in both horizontal and vertical cases, you
need to specify a length in that direction in order to
get the flex to appear. This is because the flex dis-
tributed among the elements comes from the left-
over space after the intrinsic size of the elements is
taken away. This can lead to some counter-intuitive
results when the elements with flex don't have a
well-defined intrinsic width.
This is easily demonstrated by adding some text—the cell will expand
to contain it. The available space gets used up, so the flex can no longer
be distributed.
