DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
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.
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! :)
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.
Hi, This is really helpful
are these properties works on mobile like (iPhone, Android)
hey chris. just wanna thank you for being so damn pedagogic. very nice tutorial i might add :)
How can i create code editor website like codepen? please answer me ! i’m waiting for your answer!!!
Also, instead of relying on the new CSS conventions…
<p>This is vertically centered</p>
(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.
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.
Hi – I am trying to download the video for #131 — but clicking the ‘Download Video File’ doesn’t seem to work
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).
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.
Get the CSS-Tricks newsletter
Copy and paste this code: micuno *
Leave this field empty