I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that.
display: flex; to the parent element lays out the children in a row.Well, that’s cool. I guess I could have floated them, but this is easier.
They should probably take up the full space they have though. Can I just stretch the parent to 100% wide? Well, I can, but that’s apparently not going to affect the child elements.
Maybe I can use width: 50%; on the children? That works, but I thought the point of flexbox is that you don’t have to be all specific about width. Ah yes, flexbox has all of these ways of expressing the growy-shrinky-initial behavior of children. Looks like flex: 1; is about as easy as it gets here.
flex: 1; to the children allow them to grow and fill the space.I like how I haven’t had to do any math or hard code values so far. Can I make it a three-up pattern without touching CSS?
Nice.
Hmmm, wait. The sizing is a bit, uhhhh, flexy? Nothing is forcing these boxes to be one-third of the container all the time.
Looks like flex-basis: 33% doesn’t fix this. flex: 0 0 33%; also doesn’t do the trick. Looks like width: 33%; flex-shrink: 0; does though, if we’re really wanting to strongarm it.
The long word forcing that sizing behavior at narrow widths is perhaps an uncommon scenario. We could have also solved it with word-break: break-word; hyphens: auto; on the child.
Another thing we could do is just let the dang items wrap instead of being so strict about it. Flexbox can do that, right?
Oh hey, that reminds me how cool it is that those first two items are the same height. That’s the default stretch behavior, but it can be controlled as well. And it’s by row, which is why the second row has its own different height.
What if I want that first “Love” block to be on top instead? Looks like I can re-order it, eh? Let’s see, the default order is 0, so to be first, I do order: -1;.
Ha! That kinda worked. But I meant that I want it to take up the full width on the top row. I guess I can just kick it up to flex-basis: 100%; and the others will wrap accordingly.
It’s pretty weird to have the source order and visual order different like this. Maybe that should go in the “don’t ever do this” category.
What if I wanna bail on the whole flexbox thing at a certain point? Part of me wants to change the direction to go vertical with flex-direction: column; and force the children to be full-width. Ah, a simple display: block; on the parent does that in one swoop.
Flexbox can do way more stuff! One of my favorites is how auto margins work to “push” other elements away when there is space. This is just one little journey playing with some UI and seeing the useful things flexible does along with things that can make it confusing.
I’ve been using flex for everything — maybe too much but CSS Grid still seems impenetrable.
I still don’t effortlessly understand all of the flex properties — but flex-direction and it’s associated justify-content options are just plain amazing.
Really nice stuff, I appreciate how you went through the thought process. Makes it easier to make the connections and understanding the flex properties
Grid is even more amazing when it comes to large layouts and general templating then flex for the children
Awesome! I adore stuff like that—to show the path of developing thought is the best way to teach somebody something new. Thanks!
Very well articulated. Excellent way to explain flexbox. Need more content with this writing style. Thanks
I always solve these “weird” situations with “min-width: 0”, or any value that suits to us that is different than “auto”.
Such a “different” approach to an article. I was both smiling and learning something new.
I really like this approach. Kudos to Chris.
I actually think this is a very compelling and forward thinking feature of Flexbox, since it allows us to separate the markup from any specific presentation. Say we have a design for a magazine page that places a paragraph in the top corner and a giant headline below it. Viewing this design, we will instinctively read the headline first and then the small paragraph, so the markup that best describes this is something like
<h1>Big Headline</h1><p>Lorem ipsum dolor sit amet...</p>. In the past we would have resorted to floats or some unmanageable combination ofposition: absolutes to get this to work. It would have been very tempting to just place thepbefore theh1. Flex order makes this trivial and expressive.This affordance helps us think of any specific visual design as a possible presentation of content, rather than an intrinsic feature of the content. The most popular areas where this is discussed are responsive design and accessibility – in the above example, if a small (“mobile”) design placed the headline first, this would just be another presentation of the same content, not different content. Same for screen readers. These presentations should not suffer because of the placement in the original visual design.
But the issue is bigger than just these two cases. Markup is intended to add meaning and context to text and media (e.g. setting heading levels, adding alt text, or setting a paragraph as a block quote). This added context is most useful when it’s both machine-readable and human-readable. Markup, at its loftiest, is an extension of written language.
Tools like Flexbox order empower us as designers to author rich, expressive documents that also look amazing when viewed in the browser.
I think what Chris is getting at here is that it’s an accessibility issue when the document order and screen order are too much out of sync. Flexbox and CSS Grid can enable bad a11y practices, if you’re not mindful.
I think Jonathan got the point there with his example. I’m a designer and I’m used to the idea that a layout isn’t read left-to-right top-to-bottom. By tweaking scale and contrast, I can conduct the viewer to read items the order I want. And from accessibility point of view, I think THIS should be the markup order. I mean, I want to control and polish the experience for a screen reader person as much as I do it for a seeing person.
Of course this is a great power that comes with great responsibility. And being an easy language for new comers, it is dangerous that it is so easy to break the experience for non sighted users. But, that’s a reason for we to discuss and expose, not to avoid.
Nice one. Learnt something.
Great article. Many thanks.
The 3 (or more) equal-width columns might be better handled with grid layout rather than flexbox. Grid also has the
gapproperty (which can be simulated with margins in flexbox layouts).Flexbox isn’t the right tool for every layout job, but as you’ve shown, it can often be made to work.
This is the best article I’ve read flex box so far!
Nice insight in some flexbox thoughtwork. One sidenote: width: 100% is unnecessary here. The default value width: auto does the stretching allright.
You tried it, it failled, remove it then cause it clutters your code :)
What is the typeface used in the code?
Gotta LOVE the desktop-first approach with
max-widthin the media query. Who says one HAS TO build mobile-first?! Ppphhfft!Yes, I’m being serious .
I’ve been using flex a lot since a couple of years, one of the first thing I do when I arrive on a new project is adding a couple of mixins I created a while ago, here is an exemple :
With this you can simply use in your SASS files something like :
I found it more readable and easy to visualize when you read some css files :)
You can find more @ https://github.com/Yexan/codepen-utilities/blob/master/sass/mixins/utilities.sass#L78 if you’re interested :)
Hi author! Thanks for the brilliant article. Can you elucidate about the auto-margin stuff you mentioned at the bottom? I’m not familiar, so I don’t know what to look for. Any terms I could use to search?
Check out how the “user menu” here push itself all the way to the end of the container:
Hi Chris, thanks for the article, it explained a lot of things about CSS flexbox I was confused about previously.
You say at one point in the article:
So can I use CSS flexbox in place of messing with float? Since I build websites with side columns and the float resizing is a pain to work on.
Yep, we no longer use floats for layouts.
Heck, you might even get a frown here and there for using Flexbox for layout because there is already CSS Grid. If that happens to you, ignore them, hahaha.
PS. Yes, the resizing of floats (and clearing I might add) it’s no longer something you have to deal with, Flexbox FTW.
It’s great. Got to know about the flex-wrap property. The trickiest property but a useful one. The Grid layout property came and it’s too very useful for the developers to use it and pretty much needful for arranging elements by so simply. Will the Grid layout properties doesn’t let us feel the necessity of Flex?