#131: Tinkering With Flexbox | CSS-Tricks

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

Erik

# January 30, 2014

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

Alex

# January 31, 2014

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.

Mahesh

# February 21, 2014

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

PHPH

# February 24, 2014

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

vanny

# March 20, 2014

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

Thomas

# April 16, 2014

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.

virendra sharma

# April 25, 2014

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

nmutua

# July 2, 2014

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

Zoidberg

# November 19, 2014

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

Comments

Leave a Reply Cancel reply