by Peter Sommerhoff | Publisher: Packt Publishing | Release Date: August 2017 | ISBN: 9781788628112

This tutorial teaches you how to use the new CSS3 Flexbox box model to create responsive web layouts more effectively!About This VideoSimple grids with Flexbox where all columns in a row have the same sizeMore advanced Flexbox grids where columns can have arbitrary sizesVertical centering to vertically align any elementMedia objects, the popular OOCSS patternThe Holy Grail Layout, a complete site layout with sidebars and sticky footerIn DetailAfter this course, you'll be able to use Flexbox to vertically align any element, create modern gridstake up remaining space, add spacing between elements, implement complete site layouts and much more!Inside the course, I'll answer all questions you may have along the way.To see Flexbox in practice, 3 mini-projects will manifest your skills and enable you to use Flexbox productively in future web design projects. I look forward to seeing you inside. As a bonus, this course includes a complete Flexbox Cheat Sheet that you can use to recap all you've learned and to refer back to while using Flexbox. Additionally, I included the code for a Flexbox demo showcase -- which is like an interactive cheat sheet for you to see in the browser that contains every property and every layout example from this tutorial.

1. Chapter 1 : Welcome To The Flexbox Course!
   • How To Make The Most Of This Course 00:02:05
2. Chapter 2 : Let's Dive Right In: Learn The Flexbox Basics
   • What is Flexbox and Why Should I Use It? 00:05:54
   • What About Browser Support for Flexbox? 00:04:53
   • How Do I Use Flexbox? 00:04:03
   • Flexbox Principles 00:04:54
3. Chapter 3 : Styling Flex Containers
   • flex-direction - Creating Row & Column Layouts 00:07:02
   • justify-content - Justifying Items Along the Main Axis 00:06:02
   • align-items - Aligning Items Along the Cross Axis 00:04:06
   • flex-wrap - Multiple Rows & Wrapping Inside Flex Containers 00:03:03
   • align-content - Justifying Content Along the Cross Axis 00:04:36
4. Chapter 4 : Designing Flex Items
   • order - Reordering Flex Items 00:02:41
   • align-self - Stubborn Children 00:02:46
   • flex-grow - Letting Children Grow 00:07:23
   • flex-shrink - Shrinking Flex Items 00:05:41
   • flex-basis - Setting the Base Size 00:08:29
5. Chapter 5 : Flexbox in Practice
   • Flexbox Grids: Creating Responsive Galleries #1 (Minimal Code) 00:10:24
   • Flexbox Grids: Creating Responsive Galleries #2 (Extra Flexibility) 00:06:16
   • Real Vertical Centering with Flexbox (no more vertical-align) 00:06:08
   • The Media Object Pattern 00:11:49
   • The Holy Grail Layout 00:10:27
6. Chapter 6 : Where to go from here...
   • A Quick Recap & What's Next 00:03:51