#140: Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap

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.

Comments

Martin Malinda

# July 9, 2015

Here its done with inline blocks and text align justify:

Bartolomeo Jonah

Permalink to comment# July 17, 2015

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 :)

Simon Davies

# July 9, 2015

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?

Ryan Yurkanin

Permalink to comment# July 13, 2015

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 : )
Sandro

Permalink to comment# February 17, 2016

What?

Olex

# July 15, 2015

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!

.flex-title {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  .title-note {
    margin-left: auto;
  }
}

Ragesh

# July 15, 2015

Thanks chris, its really helpful but i am worried about the browser compatibility.

André

# July 19, 2015

This is pretty cool! Thank you.

Now I’m wondering if something like this is possible?

Chris Coyier

Permalink to comment# July 20, 2015

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.

Morten Andersen

# September 23, 2015

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?

Rich Donnellan

# April 19, 2016

Better late than never:

To get the titles to line up correctly, use align-items: baseline.

Comments

Leave a Reply Cancel reply