I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

CSS Flexbox Video Series: Introduction & Basics — 1/6

Update: While these videos are still a fantastic intro to flexbox, I’m working on a much more in depth, free video series called What The Flexbox – will be out in a few weeks! In the mean time check out my free Command Line Power User video series as well!

Tell me when it launches!

Flexbox is a new part of CSS3 that allows us to create super flexible layouts without having to deal with floats, margin centering hacks, variable height bugs, vertical centering hacks and any number of layout challenges you face when creating a website or application.

With the rise of Responsive Design, web developers everywhere feel the pain of trying to create ultra-flexible layouts with traditional CSS tools. With flexbox, we can create a container with children that expand, contract and scale to fit in the best possible way. Columns, rows, scaling, equalized heights, re-ordering and directions have never been easier with flexbox.

Flexbox is a very new idea and it can be really hard to wrap your head around how it works, and when you should be using it. To add insult to injury, there are two implementations of flexbox in the wild and every browser vendor does it just a little differently.

This leaves us with a MESS of code that will leave even seasoned CSS developers running back to warm familiar arms of floats, clearfixes and JavaScript hacks.

.flexWrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
height: 100%;

This video series will simplify things, discover the ins and outs of flexbox, how it works as well as how to back-port flexbox to work with older implementations, devices and browsers.

Here is video #1 introducing the video series as well as the very basics of what flexbox is and how we can use it. I will be updating my blog over the next few weeks with the rest of the videos, each diving into a different part of flexbox.

Series Links:

Introduction & Basics — Part 1
CSS Flexbox Video Series: Flexbox order, re-ordering columns and rows — Part 2
CSS Flexbox Video Series: widths, heights and Layout — Learn CSS3 Flexbox — Part 3

This entry was posted in CSS, Video Series. Bookmark the permalink.

8 Responses to CSS Flexbox Video Series: Introduction & Basics — 1/6

  1. Pingback: CSS3 Flexbox ressources - blog.oskarrough.com

  2. maxw3st says:

    Thank you hugely for making this series.

  3. Davi Machado says:

    Great job man. This thing is soo powerful!

  4. Pingback: CSS3 Flexbox ressources – Codes & Notes

  5. hapaman says:

    Good stuff! Looking forward to more videos! Hopefully, we won’t have to wait a lifetime for browser support!

  6. buksy says:

    Is there an article available instead of video? :/

  7. Alexander Raasch says:

    Excellent video series. Where can I find help when some of your code produces a different result in my browser?

Leave a Reply

Your email address will not be published. Required fields are marked *