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 ...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Just to nitpick.
You can't make your lowest level container a flexbox but your title is misleading to that. It's OK to make your text container a flexbox container as long as it's continuous text. A link it's not text (duh) so if you break your text with additional elements you get what you pay for.
It's OK to make your text container a flexbox container as long as it's continuous text. --> but there is a trap here. Consider the case where you don't know the exact content. You are pulling data from a database and in 90% of the cases it's plain text and one day you pull some text having a
<strong>tag and boom, it's broken :)Well, yes, definitely. It's OK for text, which means that if you can't guarantee it is just that then you need to take measures depending on the end goal. One way could be like you said, to handle it for presentation only.
Although if you don't know what data you will receive I'd argue that you need to sanitize it to match your expectations and practices: eg if I don't expect html tags then I will sanitize the output (or better yet the input so that the dB content matches in the first place). If I do want to support tags then the presentation needs to be aware and be setup accordingly.
Even if you expect html and you want to have html the issue will still remain. How many developer are aware about how the output will be if the text will contain a link? how many beginners will even think that if I add a link to the above the result will look like I detailed? only few and this is what I am pointing here.
You may be aware about everything and you know perfectly your data but if you don't know flexbox very well you will get that surprise one day. I am trying to avoid you that surprice by explaining some quirks around flexbox that no one will explain to you until you face them ;)
That is exactly what I'm saying. If you don't have guarantees it's just text then it's not just text and you don't treat it like just text (eg use a wrapper like you said or whatever fits the use case).
If you do expect just text then you implement the necessary safeguards and treat it like just text (case in which it's OK to just use the box setup).
It semantically doesn't make sense to make a container for some text / text document / html markup a
flexbox. It doesn't matter whether you can or cannot get away with it in a given situation (no links, no idiomatic, no bring to attention, no headers, no lists, no code, no tables, no citations...)Document-type html is expected to live in a "Normal Flow" container (not flexbox or grid)
This is the main point of this post because I see everyone using flexbox everywhere so I hightlighted one issue to convince them to stop doing this.
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 ;-)That was pretty crazy times.
Actually, nothing wrong with flex here. Your block of text should be wrapped in p tag.
not everyone will do this and even in such case many developer may apply the flexbox properties to the
pelement.It was wrapped in a
<p>tag. The problem is they made theptag itselfdisplay: flex.@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.
I know, just offering a correct solution :)
I'm usually using a flex reset. Usually you need flex more times than block, so at the end it's easier to set block/inline where needed. Not to mention that using flex actually can have better render performance in some cases.
setting flex everywhere by default is worse than what I described in this post ...
Works well for me, it helps me avoid many side-effects and cross-browser compatibility issues. Using the other way I ended up applying flex to 80% of my elements, which is really annoying.
Works well for me --> until now ;)
No, worked well for the last 3 years for all my projects. Familiar with React Native's View component? It's basically the same methodology.
Interesting idea 🔥
It has a major drawback. Using reset the classic way like
div, article, section, etc {...}It'll conflict with 3rd party libs. I'm doing this in a React environment where no HTML elements are used in JSX, instead there's a unified component for all that's markup and style, so I can simply set a default for these components. I believe if the web would be introduced today or it'd allow braking changes, flex would be the default.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 ?
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
CSS drives me crazy
asdasd
total beginner here, thank you Temani for this material and good explanation. I am grateful that there are places such as this platform and people like you who could have lived their life keeping all the knowledge yet they share their knowledge at the cost of their time and effort instead. thank you, man!
You're welcome. Appreciate your message :)
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.
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 💡🤙
Wait what? This is how we did things before flexbox and it was a nightmare.
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 ((:
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
flex-direction: column;
I think that could be a possible solution :)
no, it will also give you a strange result and the 3 boxes will be above each other ;)
Roger that
It makes no sense and is not a use case for flexbox.
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.
Yes! Thank you. I've made this mistake, got confused... And now I understand.
Why would you make paragraph as a flex .let it be just use a div than normal p in it. That should work fine.
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:
pordivdoesn't make a difference and the same issue will occur for any element containing textYeah Right
Thanks man, that will definitely help me in the future 👌💪
Thanks for this article really useful 🙂
Why not?
Just wrap the inline elements inside a tag.
Voila, it is centered.
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.
very helpfull!!! I've always struggled with flexbox
You should never put text directly inside a div tag.
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
pthe issue will remain the same if we try to apply the flex properties topI 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,