Flexbox Tutorial by Sean Fioritto: “Bite-size mini lessons all about flexbox.”
This is an interactive video intro to flexbox and is comprised of 5 sections that walk through various parts of flexbox.
1 – Flexbox: A quick look at flexbox (3:48)
2 – Flex-container: Position items within a flexbox container (3:51)
3 – Flex-container-2: Control your rows and columns (2:32)
4 – Grow-shrink: grow and shrink flex items (6:19)
5 – Flex-layouts: Implement the Sticky Footer and Holy Grail layout, infamous for being tricksy to do – but not with flexbox (6:00)
About the Author:
Howdy, I’m Sean Fioritto. I’m a front-end developer based in Chicago. You can find me, @sfioritto, on Twitter and my blog is Planning for Aliens. I’ve also written for Smashing Magazine and created a few, cool open source projects.
More From the Author:
See also:
If you’re wondering “What is Flexbox?” and would like to learn more here are a few places to start:
- CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C’s candidate recommendation (CR) stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size (or device). —Wikipedia
- Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the fundamentals. —Mozilla Development Network
- Basic Concepts of Flexbox: This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides. —Mozilla Development Network
Webmaster’s Note: I found this tutorial in my search for trying to understand how to use css flexbox. I found it to be very helpful, so I’m including it here in the hopes that you will also benefit from it.
