Lynda.com - CSS: Flexbox First Look

CSS: Flexbox First Look with James Williamson



Take a look into the CSS horizon and explore Flexbox, aka the Flexible Box Layout model, an important part of the evolution of CSS3 layouts. Senior author James Williamson walks through the exciting new capabilities Flexbox offers for controlling layouts—with a fraction of the code previously required. Learn what browsers currently support Flexbox and how to define containers and use properties to control position, size, and display order. Throughout the course, you'll have occasions to test your understanding with engaging, hands-on Challenge exercises.

Introduction 2m 47s

1. Flexbox Basics 20m 59s

• Current support 3m 53s
  
• Defining flex elements 3m 15s
  
• Understanding flex axes 1m 37s
  
• Controlling element flow 3m 12s
  
• Content wrapping 3m 28s
  
• Challenge overview 2m 55s
  

2. Element Flexibility 21m 10s

• Understanding the flex property 2m 18s
  
• Controlling element flexibility 7m 7s
  
• Defining display ratios 3m 14s
  
• Challenge: Creating element flexibility 4m 6s
  
• Solution: Creating element flexibility 4m 25s
  

3. Controlling Alignment 47m 12s

• Main axis alignment 6m 14s
  
• Cross-axis alignment 6m 8s
  
• Aligning single items 4m 17s
  
• Flex item margins 9m 24s
  
• Aligning multiple lines 7m 13s
  
• Challenge: Aligning flex items 5m 59s
  
• Solution: Aligning flex items 7m 57s
  

4. Element Display Order 27m 18s

• Defining element display order 4m 15s
  
• Flex flow and display order 5m 58s
  
• Nesting flex containers 4m 24s
  
• Challenge: Controlling display order 6m 4s
  
• Solution: Controlling display order 6m 37s
  

Conclusion 3m 59s

Additional resources 3m 59s