Never make your text container a flexbox container

^{Find out more CSS tricks at css-tip.com}

Flexbox is great. Unfortunately, many developers use it in the wrong way. To be more precise, they use it automatically everywhere even when it should not be used.

Let's take the following example

<p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper augue ac leo tincidunt euismod.</p>

.box {
  width: 300px;
  height: 300px;
}

Now, you are given the common task to center the content of the box horizontally and vertically. Well, a trivial task:

let's use flexbox!

.box {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

It's done, the content is centered and the result looks perfect, isn't it?

No, what you have done is a mistake

To understand why it's wrong let's modify our content slightly by introducing a link in our content

<p class="box">Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Quisque semper augue ac leo tincidunt euismod.</p>

Now run the code and see the result:

Don't worry, what you see is not a bug but it's indeed the logical result of the flexbox algorithm (non-intuitive but logical). To understand this behavior let's take a look into the specification:

Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.

In our first case, we only have one sequence of text and this one will get wrapped into an anonymous block to become a flex item. There is no strange result in this case since the whole text is wrapped together.

In the second case, things are different. We have an in-flow child (our link <a>) and on each side of it we have a sequence of text so we end up having 3 blocks: the link + 2 anonymous blocks for the text

Now it becomes more clear. We have 3 boxes perfectly centered using flexbox following a row direction (the default one) but the result is not what we want at all.

The fix in such a situation is easy: We simply add an extra wrapper around the text

<p class="box"><span>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Quisque semper augue ac leo tincidunt euismod.</span></p>

Or we consider an outer container.

<div class="box"><p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Quisque semper augue ac leo tincidunt euismod.</p></div>

The goal of this post is not to fix this particular situation. It's more to highlight some unwanted results that may occur when badly using flexbox. The above is one basic example among a lot you will probably face and the fix may not be always trivial.

The real issue is not finding the fix. The real issue is to see the issue which may only happen for some particular content (like in the above when adding a link). You may write a lot of CSS and notice the issue very late when changing the content slightly then you are good to redo much of your code.

This said you should always remember this gold rule:

Flex[box] is for boxes and not for texts so never make your text container a flexbox container.

OR