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.
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?
Hey Simon!
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 : )
What?
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 andtext-align
center would bring it in from the left in the default state. But you needflex-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
.