#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

  1. User Avatar
    Martin Malinda

    Here its done with inline blocks and text align justify:

    • User Avatar
      Bartolomeo Jonah
      Permalink to comment#

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

  2. User Avatar
    Simon Davies

    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?

    • User Avatar
      Ryan Yurkanin
      Permalink to comment#

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

    • User Avatar
      Sandro
      Permalink to comment#

      What?

  3. User Avatar
    Olex
    Permalink to comment#

    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;
      }
    }
    
  4. User Avatar
    Ragesh
    Permalink to comment#

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

  5. User Avatar
    André
    Permalink to comment#

    This is pretty cool! Thank you.

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

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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.

  6. User Avatar
    Morten Andersen
    Permalink to comment#

    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?

  7. User Avatar
    Rich Donnellan
    Permalink to comment#

    Better late than never:

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag