#131: Tinkering With Flexbox

In this video we tackle a little front end layout problem that would have been pretty much impossible without flexbox. I wrote up an article about it too, for easier reference of code.

Comments

  1. User Avatar
    Erik
    Permalink to comment#

    Really nice video!
    Never did anything with flexbox yet, felt like “meehh I’ll look at it later”. However this video made it seem super nice and not so hard at all to dive in to! :)

  2. User Avatar
    Alex
    Permalink to comment#

    That’s actually pretty cool, I implemented some layout with flexbox a year ago, I used modernizr to target old browsers and provided some jacky fallbacks. Flexbox layout even used to crash my iPad Safari back in iOS 6. =)

    Anyway, thanks for this video Chris! I’m pretty sure everybody enjoyed it.

  3. User Avatar
    Mahesh
    Permalink to comment#

    Hi, This is really helpful
    are these properties works on mobile like (iPhone, Android)

  4. User Avatar
    PHPH
    Permalink to comment#

    hey chris. just wanna thank you for being so damn pedagogic. very nice tutorial i might add :)

  5. User Avatar
    vanny
    Permalink to comment#

    How can i create code editor website like codepen? please answer me ! i’m waiting for your answer!!!

  6. User Avatar
    Thomas
    Permalink to comment#

    Also, instead of relying on the new CSS conventions…

    <div class="box-wrap">
      <article>
        <h1>Boom</h1>
        <p>This is vertically centered</p>
      </article>
    </div>
    
    .box-wrap {
      height: 300px;
      line-height: 300px;
      width: 300px;
      text-align: center;
      background-color: #dedede;
      article {
        line-height: normal;
        display: inline-block;
        vertical-align: middle;
      }  
    }
    

    (http://codepen.io/hollart13/pen/munzo/ “Vertical Height “)

    Utilize the new HTML5 conventions. Normally in an instance I’ve shown, h1 and p tags would inherit the line height. However, using “article” keeps everything together and is actually quite simple to use. This example is great when using with Grids. Interested to see the outcome of “flexbox” in the coming months.

  7. User Avatar
    virendra sharma
    Permalink to comment#

    hello i have upload my website but it behave differently different computer screen.
    when we resize the page then the content of that page comes out the page.Please help me.

    i can send the coding of that page.
    please

  8. User Avatar
    nmutua

    Hi – I am trying to download the video for #131 — but clicking the ‘Download Video File’ doesn’t seem to work

  9. User Avatar
    Zoidberg
    Permalink to comment#

    Used this today and can’t thank you enough for the content you provided regarding Flexbox.

    This may help others, but I found that none of this worked together until I added height 100% to body,html.

    Btw, noticed that you got a mention in CSS3: The Missing Manual (pg.436).

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-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag