Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
CSS.3: Flexbox

Introduction

​Flexbox is an alternative and often more convenient system for CSS layout.
Also see the section on column layouts using flexbox here.​

Distributing Boxes

One of best features of flexbox is it's ability to distribute boxes across the available space in intuitive ways. It's very easy to visually explain the ways that flexbox will do this.

Align Content

Align Items

Justify Content

Exercises

Position and Distribute Elements Using Flexbox

Don't worry too much about the end sections of the exercise. We won't be using things like order very often.

Further Reading

Game that teaches flexbox: https://geddski.teachable.com/p/flexbox-zombies​
Last modified 2mo ago