O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS Flexbox : Build Modern Web Layouts With Flexbox

Video Description

Get up to speed and learn the latest techniques for building and managing CSS-based web layouts with Flexbox. In this in-depth, hands-on course, you'll learn the newest approach to building functional, responsive layouts that use minimal code. No hacking, additional Javascript, or even CSS floats or positioning required! You'll be introduced to fundamental Flexbox concepts and terminology, before being lead through progressive, hands-on lessons. You'll see how to control flex spacing, alignments and positioning, how to build scaling, flexible layouts that will look great on any device, and how to build more advanced, intricate layouts. All this and more awaits in this course!

Table of Contents

  1. 1.Introduction to the course 00:02:25
  2. Course Introduction 00:02:25
  3. 2.Introduction To CSS Flexbox 00:00:28
  4. Section 2 Introduction 00:00:28
  5. Understanding Flexbox Improved Web Layouts 00:07:37
  6. Flexbox Terminology 00:05:02
  7. Current Browser Support For Flexbox 00:09:20
  8. Tools We'll Need 00:02:19
  9. Section 2 Summary 00:00:32
  10. 3.Getting Started With Flexbox 00:00:29
  11. Section 3 Introduction 00:00:29
  12. Creating Our First Flex Container 00:10:21
  13. Understanding Flexbox Flow Axis Directions 00:03:41
  14. Setting Flow Directions 00:05:29
  15. Understanding Flex Widths 00:11:37
  16. Controlling How Child Flex Items Wrap 00:07:17
  17. Shorthand For Faster Coding 00:04:13
  18. Section 3 Summary 00:00:31
  19. 4.Controlling Element Alignment 00:00:35
  20. Section 4 Introduction 00:00:35
  21. Main Axis Spacing & Alignment 00:09:28
  22. Vertical Spacing & Alignment 00:04:47
  23. How Margins Are Impacted By Spacing & Aligning 00:03:55
  24. Controlling Alignment Of Individual Flex-Item 00:08:06
  25. Cross Axis Spacing And Alignment 00:08:19
  26. Handling Spacing With Wrapped Flex-Items 00:06:24
  27. Controlling Flex Item Order 00:11:45
  28. Section 4 Summary 00:00:23
  29. 5.Establishing Element Flexibility 00:00:37
  30. Section 5 Introduction 00:00:37
  31. Establishing A Flexible Starting Point 00:07:30
  32. Determining How Flex Items Will Increase In Size 00:06:26
  33. Determining How Flex Items Will Shrink In Size 00:06:13
  34. Using Flex Shortcode 00:06:21
  35. Section 5 Summary 00:00:42
  36. 6.Working With Nested Flex Containers 00:00:38
  37. Section 6 Introduction 00:00:38
  38. Getting Set Up For Nested Containers 00:06:42
  39. Wrapping Nested Child Flex-Items 00:03:03
  40. Setting Nested Child Flex-Items To Scale 00:02:59
  41. Setting Nested Child Flex-Item Display Order 00:09:34
  42. Excercise 00:01:35
  43. Excercise Solution 00:05:06
  44. Section 6 Summary 00:00:29
  45. 7.Conclusion 00:03:54
  46. Resources 00:03:54
  47. Closing Message 00:00:43