Grow your CSS skills. Land your dream job.

#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. 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. 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. Mahesh
    Permalink to comment#

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

  4. PHPH
    Permalink to comment#

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

  5. vanny
    Permalink to comment#

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

  6. 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. 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. nmutua

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

  9. 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).

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".