Create a Flexible Box with Flexbox

Here's a quick example of creating a flex container with some flex items.

We'll create one flex container and put three flex items inside it. We'll also see how we can affect their size by adding more content, and playing around with some property values.

Here's how we'll start it:

View Output

We've got a big wide red flex item, followed by a small green and a small blue one.

Here's the relevant code from that example:

We use display: flex to declare the outer element as a flex container. That's all we need in order to start using flexbox. Now all of that flex container's in-flow children automatically become flex items and are therefore laid out using the flex layout model.

But you'll notice that the red flex item is wider than the other two. This is because we applied flex-grow: 1 to that item. Here's the code we used for that:

The flex-grow property sets the flex item's grow factor, which determines how much the flex item will grow relative to the other flex items (after any positive free space is distributed).

The initial value is zero, so the other two items have a grow factor of zero (because we haven't used the flex-grow property on those items). This causes the red flex item to grow as much as needed to take up the available space. The other two items oblige by shrinking until they just fit their contents and no more.

Adding Content

You might be wondering why we didn't just set the width of the red item by using the width property?

Yes, we could've done that. But if we had, I wouldn't have been able to show you this next bit...

View Output

All I did was add some content to the blue item, and it grew as required in order to fit the new content. In fact, there was so much content, that the red item completely shrunk to fit its own contents and no more.

So this is what I meant when I said the grow factor determines how much the item will grow after any positive free space is distributed. By adding so much content to the blue item, we effectively removed the available free space, and the red item had nowhere to grow.

The height of the blue flex item also grew to accommodate the new content. And just as importantly, the other two items also increased their height to match. With flexbox all this happens by default, so this saves us from having to tweak heights and widths to try to get all our boxes looking even.

Changing the Width

So now that I've showed you that you don't need to set the width on your flex items, let's see what happens we do set the width.

View Output

As expected, the blue item becomes as wide as the specified width. But because this now reduces the size of the blue item, the red item grows again — but only as much as required to take up the available free space.

So now we're starting to see why it's called flexible box layout. Our flex items are nice and flexible — they seem happy to fit in with whatever's going on around them.

You can probably imagine how easy it would be to take this a step further and create a basic template for a website layout. So let's do that now.