Learn Development at Frontend Masters
(Only MVP Supporters can
download original high-quality recordings for offline viewing.)
This is the video screencast version of a blog post I did not long ago: Useful Flexbox Technique: Alignment Shifting Wrapping. I was at a CodePen Meetup and used it as a quick show-and-tell demo and it was kinda fun so, you know, RECYCLING.
We have a title/subtitle situation with a very specific layout in mind that we want to behave a certain way responsively. We eventually get there with Flexbox, but we explore lots of CSS positioning stuff along the way for fun.
See the Pen Wrapping Same-Line Titles by Chris Coyier (@chriscoyier) on CodePen.
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.
Here its done with inline blocks and text align justify:
Great, if you add text-align: left (ta-l) to subelements you get it perfectly I guess. More over bottom line gets aligned as well (in case of different font sizes) which is not with flex. Thanks Martin and Criss. I may want to use it in some time :)
Great little screencast on flex-box, i’ve been looking at this over the last few weeks and is great to see ti at work rather than reading it.
Even with the prefixes, at what version of IE would that support before u would have to think of old school fix?
Currently, if you are using all of the proper syntax for the various iterations of flex, and the proper vendor prefixes, it is usable from IE 10 onwards.
Caniuse.com is an awesome resource for questions like this and I suggest that you check it out : )
You can also use auto margins in flexbox. Doing it this way doesn’t quite accomplish the same design, but it combo’s well with flex-wrap!
Thanks chris, its really helpful but i am worried about the browser compatibility.
This is pretty cool! Thank you.
Now I’m wondering if something like this is possible?
Uhmmmmm. I’m not so sure. You can’t use the flex-grow technique because then the first title would be bigger than itself and text-align center would bring it in from the left in the default state. But you need flex-grow to make sure it’s 100% wide when it wraps.
Seems like the kind of thing you could use the technique in the video for, but have a breakpoint where you ultimately break them into centered blocks.
The Flex version:
The .title-note is a little below the .title-main for some reason.
Try to zoom your browser … is align-items: flex-end not working?
Better late than never:
To get the titles to line up correctly, use align-items: baseline.
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.
Get the CSS-Tricks newsletter
Copy and paste this code: micuno *
Leave this field empty
You may write comments in Markdown thanks to Jetpack Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after. All comments are held for moderation. Be helpful and kind and yours will be published no problem.