Learn Development at Frontend Masters
(Only MVP Supporters can
download original high-quality recordings for offline viewing.)
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.
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.
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
You may write comments in Markdown thanks to Jetpack Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after. All comments are held for moderation. Be helpful and kind and yours will be published no problem.