CSS
Flexbox
Crash Course
This site is an additional guide for my upcoming free CSS Flexbox Crash Course. The start files are meant for you to add the missing flexbox CSS, the finished files show the completed flexbox layouts.
These examples are built with plain HTML and CSS. Use them to follow along, experiment, and deepen your understanding of each Flexbox concept covered in the course videos.
Note: this guide is intended for desktop-only. Probably will display fine on tablets, unlikely to display correctly on mobile.
Core Concepts
Understanding flex directions, axis, and default values.
Justify Content
Control item spacing along the main axis.
Align Items
Control item alignment along the cross axis.
Code Along: Build Buttons
Create professional, modern buttons using flexbox
Flex Wrap
Managing multiple rows with flex-wrap.
Align Content
Aligning rows when you have wrapping.
Code Along: SaaS Features Section
Build marketing sections showcasing product features.
Controlling Item Widths
flex-grow, flex-shrink, and flex-basis properties.
Align Self
Override alignment for individual flex items.
Order
Change visual order without changing HTML.
Gaps
Controlling spaces between flex items.
Shorthand Properties
Using flex shorthand and other combined properties.
Code Along: Dice Build
Build a complete set of dice using only HTML and CSS Flexbox - a practical project to showcase your flexbox skills!