Never make your text container a flexbox container

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.

Comments

[Lakshya Thakur]

Thanks for the insights. What should be the case where we have a parent flex container and in inner children one is a div and another is span. Think it like a card and it’s caption. Parent will have flex-direction:column. Is this use-case okay ?

[AdithyaR-afk]

CSS drives me crazy

[Temani Afif]

yes it's should be ok because you are already describing two boxes (a div and span) and your text will be inside the span. If it's a div + some text then you may face some strange issues until you wrap the text inside its own box

[King Rayhan]

asdasd

[Hermanet Lay]

Why not?
Just wrap the inline elements inside a tag.
Voila, it is centered.

[Temani Afif]

This is what I already said :) I also said that this post is not focused on this particular case which is one example to hightlight the missuse of flexbox.

[Simon Köhler]

Yes, such a typical beginners thing that you need an extra div or something. I guess many even senior devs had to struggle in the beginning with flex, haha. When i started making sites, there was <font color="white"> and <table bgcolor="gray"> the fanciest stuff available ;-)

[Pavel Mineev]

That was pretty crazy times.

[Ximo Romero Esteve]

flex-direction: column;

I think that could be a possible solution :)

[Temani Afif]

no, it will also give you a strange result and the 3 boxes will be above each other ;)

[Reynaldo]

It makes no sense and is not a use case for flexbox.

[Temani Afif]

what make no sense? and what use case you are talking about?
You probably get the post wrongly because I am explaining that flexbox is not suitable of all the cases and I am giving an example of use case where we should not use flexbox.

[Junk]

Yeah. You can think of the default display type for letters, words, and phrases as inline (but those are
layout-implementation-detail boxes being rendered, not explicit elements), just like the default display type for anchor elements is inline.

When you make an element a flexbox container, that has an explicit impact on the layout. Namely, all direct descendants are rendered as blocks, according to the flexbox algorithms and configured properties.

So each phrase and the anchor element become blocks in a flexbox row and that's exactly how it's supposed to work.

[Nikola Betica]

Actually, nothing wrong with flex here. Your block of text should be wrapped in p tag.

[Temani Afif]

not everyone will do this and even in such case many developer may apply the flexbox properties to the p element.

[Nikola Betica]

I know, just offering a correct solution :)

[Mihail Malo]

It was wrapped in a <p> tag. The problem is they made the p tag itself display: flex.

[Temani Afif]

@qm3ster the initial code was using a div and I changed it to p but it doens't make a difference the type of the container. The main issue is the same and we should not have display:flex on text conainer.

[Haseeb Udeen]

Roger that

[Andrew Robida]

I do everything I can to never put text in a div unless it's for a custom button or link. All important info I stick in a h1-6 or p, aside,

[𝐓𝐡𝐨𝐦𝐚𝐬 𝐒𝐭-𝐀𝐦𝐨𝐮𝐫]

Just found out about float: right to align content today (-_-')
Where I always added flex to the parent container. So with float right / center text / margin-left:auto margin-right:auto I guess where all good without flexbox to center items on the y-axis 💡🤙

[katy lavallee]

Wait what? This is how we did things before flexbox and it was a nightmare.

[Ishay Mamluk]

Good luck with that ;)
That’s exactly the kind of stuff flex allows you to get away with in an elegant, and most important, a robust way

[𝐓𝐡𝐨𝐦𝐚𝐬 𝐒𝐭-𝐀𝐦𝐨𝐮𝐫]

I think my comment may've came as misleading; Just pointing out few code one-liner centering solutions for single element.

I just can't bare the idea of having overload of errthang "weird flex...but okay" situations where your html is a bloat of nested divs.

Still thanks for the feedback ((:

[Matt Heslington]

You should never put text directly inside a div tag.

[Temani Afif]

there is nothing wrong adding text inside a div if you don't aim to have any particular semantic. Besides that, this post is not focused on semantic, even if I use p the issue will remain the same if we try to apply the flex properties to p

[Mehak Saini]

very helpfull!!! I've always struggled with flexbox

[Vaibhav Ramawat]

Why would you make paragraph as a flex .let it be just use a div than normal p in it. That should work fine.

[Temani Afif]

Say this to all the beginners working with flexbox. I never make a paragraph flexbox and I wrote this post to insist on the fact that you should not do it because many will do it

PS: p or div doesn't make a difference and the same issue will occur for any element containing text

[Vaibhav Ramawat]

Yeah Right