The CSS3 Flexible Box layout model, or Flexbox to use its popular name, is a great way to create flexible and grid-based layouts without having to rely on floats or inline-block elements. In this course, Craig Campbell will show you all the fantastic things Flexbox can do, from setting up rows and columns, to understanding the properties of Flexbox. Finally, you’ll put this into practice by creating a simple page layout. So open up your favourite text editor and learn Flexbox!
Build on your knowledge of Flexbox with our short course: 6 Flexbox Projects for Web Designers.
Learn CSS: The Complete Guide
We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.
1.Introduction
1.1Introduction01:29
1.2What is Flexbox04:55
2.Using Flexbox
2.1Flexbox Containers07:44
2.2Column Widths10:43
2.3Width Shorthand07:42
2.4Flex-Direction04:05
2.5Reordering Your Content06:03
2.6Adding Content05:06
2.7Content Spacing03:36
2.8Wrapping Content06:22
2.9Flex-Flow Shorthand06:57
2.10Cross-Axis Alignment11:55
2.11Justifying Content04:31
2.12Align-Items07:39
2.13Adding Vendor Prefixes06:01
3.Sample Website Layout
3.1Building a Simple Layout05:30
3.2Styling the Layout07:48
3.3Finishing the Styles07:35
4.Conclusion
4.1Final Thoughts01:08
