HTML & CSS Is Hard

Flexible Items

All our examples have revolved around items with fixed- or content-defined-widths. This has let us focus on the positioning aspects of flexbox, but it also means we’ve been ignoring its eponymous “flexible box” nature. Flex items are flexible: they can shrink and stretch to match the width of their containers.

The flex property defines the width of individual items in a flex container. Or, more accurately, it allows them to have flexible widths. It works as a weight that tells the flex container how to distribute extra space to each item. For example, an item with a flex value of 2 will grow twice as fast as items with the default value of 1.

Diagram: no flex (3 square boxes), equal flex (3 rectangle boxes), unequal flex (2 smaller boxes, one stretched out box)

First, we need a footer to experiment with. Stick this after the .photo-grid-container element:

Then, some CSS:

.footer { display: flex; justify-content: space-between; } .footer-item { border: 1px solid #fff; background-color: #D6E9FE; height: 200px; flex: 1; }

That flex: 1; line tells the items to stretch to match the width of .footer. Since they all have the same weight, they’ll stretch equally:

Web page with three equal boxes that stretch to fill the footer

Increasing the weight of one of the items makes it grow faster than the others. For example, we can make the third item grow twice as fast as the other two with the following rule:

.footer-three { flex: 2; }

Compare this to the justify-content property, which distributes extra space between items. This is similar, but now we’re distributing that space into the items themselves. The result is full control over how flex items fit into their containers.

Static Item Widths

We can even mix-and-match flexible boxes with fixed-width ones. flex: initial falls back to the item’s explicit width property. This lets us combine static and flexible boxes in complex ways.

Diagram: fixed-width box (flex: initial), flexible box (flex: 1)

We’re going to make our footer behave like the above diagram. The center item is flexible, but the ones on either side are always the same size. All we need to do is add the following rule to our stylesheet:

.footer-one, .footer-three { background-color: #5995DA; flex: initial; width: 300px; }

Without that flex: initial; line, the flex: 1; declaration would be inherited from the .footer-item rule, causing the width properties to be ignored. initial fixes this, and we get a flexible layout that also contains fixed-width items. When you resize the browser window, you’ll see that only the middle box in the footer gets resized.

Web page with two static-width boxes on either side of a flexible box stretching to fill the footer

This is a pretty common layout, and not just in footers, either. For instance, many websites have a fixed-width sidebar (or multiple sidebars) and a flexible content block containing the main text of the page. This is basically a taller version of the footer we just created.


Leave a comment

Your email address will not be published. Required fields are marked *