Flexbox basics

Back to the index.

Here we start our journey through flexbox-land. We will no doubt find many bugs.

We start by giving the containing div a display: flex | inline-flex. It essentially says the box is now a container whose child boxes must be flexed.

display: flex

Here is the narrow example with display: flex on the container div. Automagically, all children now become flexboxes.

As you see the children take as much space as they need, which result in quite a bit of right-padding. We will solve that later.

Par 1

Par 2

Par 3

Par 4

Now the wide example. Here, again, the children take as much space as they need, but that turns out to be more than the parent box can contain. No problem: they overflow out.

Exception: Safari Mac overflows the image out of the third paragraph, and as a result all children fit in the parent box. As far as I can tell this should not happen.

Also note that the middle text, which is a text node and a direct child of the div, is also treated as a flexible box. It doesn’t have border and padding, but otherwise it’s treated exactly equal to the paragraphs.

First paragraph

Second paragraph. It is much longer than the others, so we can see how flexboxes behave.

A bit of text outside a paragraph.

Third paragraph. An image for your convenience.

Fourth paragraph.

display: inline-flex

As to inline-flex, the only difference with flex is that it generates an inline-block instead of a block, as you can see from the narrow example.

The containing block now takes just as much space as it has to, and since the content is very short that’s not a lot. The text continues on the same line, and even the text baselines are aligned satisfactorily.

Open a paragraph

Par 1

Par 2

Par 3

Par 4

and close it.

The wide example is too wide: it forces whatever comes next to a new line anyway. However, you’ll notice that this containing block is actually slightly wider than the flex containing block: that’s because it takes its total width from the width of its flexed children.

Open a paragraph

First paragraph

Second paragraph. It is much longer than the others, so we can see how flexboxes behave.

A bit of text outside a paragraph.

Third paragraph. An image for your convenience.

Fourth paragraph.

and close it.

Continue

In general you don’t want to set the width of the flexed boxes to whatever they need. Let’s therefore CONTINUE with flex-basis, which sets the width for you.