Flex Model

The flex model is a newer feature of CSS. It was created because some sorts of desired layout can be quite challenging with the existing box model. You enter the flex zone with:

and the layout rules change for everything until you reach

</div>

then you're back in normal space and boxes behave like they're supposed to. (Of course, you can specify the display:flex style in any of the usual ways, not just inline.)

Flex as a lot of bells and whistles, so we'll borrow the approach from everybody, and start with some simple things. So:

<div style="display:flex"> <div>The First div</div> <div>This is the second one, which is longer.</div> <div>Last</div></div>

The First div

This is the second one, which is longer.

Last

The contained divs no longer stack as normal, but are all crammed together without spacing. So, how about this:

<div class="fd"> <div>The First div</div> <div>This is the second one, which is longer.</div> <div>Last</div></div>

The First div

This is the second one, which is longer.

Last

The number assigned to each inner div is the flex-grow. It is essentially a weight that tells how large you want each part after distributing extra space. Any assignment of the same number to each box will attempt an even arrangement: each of the three inner divs gets a third of the space. The weights could be unequal:

<div class="fd"> <div>The First div</div> <div style="flex:10">This is the second one, which is longer.</div><div style="flex:2">Last</div></div>

The First div

This is the second one, which is longer.

Last

A weight of 0, for which there is the alias none, means that item will not stretch at all.

<div class="fb"> <div>Please rate our web site:</div> <button type="button">Great!</button> <button type="button">Pretty Good</button> <button type="button">Okay</button> <button type="button">Eccch</button></div>

Please rate our web site:

The label at the left does not stretch. The buttons each have 1em left margins which are allocated before the flex stretch. Creates a nice, regular spacing.

The items can stretch to their target proportions only when there is enough extra space to distribute for that purpose. If the items already use up most of the space before stretching, there won't be enough to fill out the small ones to the size of the large.

Flex works horizontally by default, but can also be used vertically.

<div class="vf"> <div>This is the first box.</div> <div>This box is full of text, and it takes a bit more room.</div> <div>And this one, too</div> <div>Foobar</div> <div>This is also a line of text for your amusement.</div></div>

This is the first box.

This box is full of text, and it takes a bit more room.

And this one, too

Foobar

This is also a line of text for your amusement.

The items are now laid out vertically, each taking up the same vertical distance, since each has the same weight.

Now, you might notice that when you narrow the page, the outer box here narrows, and eventually the inner boxes are no longer the same height. The factor is used to tell how to expand the boxes to fill the available space. When some of them get too tall, there is not enough unused available space to make the smaller ones balance.

By default, flex puts all the items in one row. If space is limited, they just get squeezed or overflow. Say flex-wrap: wrap; to change this.

<div class="fd" style="width: 30vw; flex-wrap: wrap"> <div>Snake</div><div>Cat</div><div>Dog</div> <div>Vulture</div><div>Bear</div><div>Lion</div> <div>Wombat</div><div>Hawk</div><div>Squirrel</div> <div>Deer</div></div>

Snake

Cat

Dog

Vulture

Bear

Lion

Wombat

Hawk

Squirrel

Deer

Because of sizes, the items can't be padded to equal size, and extras spill onto multiple lines. Each line is spaced as though it were its own flex box, which will produce different amounts of expansion on different lines.

Some Other Things

The MDN Folks have many more details, as usual. For instance:

The flex-direction also has row-reverse and column-reverse, which arrange the contents from right to left, or bottom to top, respectively.
The full setting of the CSS flex: attribute is three values.
1. The first is the flex-grow, which is the one we've been using, and usually all you need.
2. The second is the flex-shrink, which is similar and controls how items are reduced when there is not enough space. Default is 1.
3. The third is the basis, which is the initial size of the item. The default, auto just means to use whatever size it has, from CSS or its content size.
There is a setting align-items which controls how the items are treated in the cross-direction.
1. That is, vertically if the direction is row, and horizontally if it is column.
2. Default is stretch, which fills the space. Others are center, start and end, which positions the items differently within the space.