Bootcamp
Search…
Bootcamp
Welcome to Bootcamp!
🛠
Logistics
📚
General Reference
🏞
Projects
0: Language and Tooling
1: Frontend Basics
🌈
CSS
CSS.1: Basic CSS
CSS.2: Layout
CSS.3: Flexbox
CSS.3.1: Flexbox Layout
CSS.4: Responsive Design
CSS.5: Web Design Basics
CSS.6: Bootstrap
CSS.ICE: In-Class Exercises
CSS.POCE: Post-Class Exercises
2: Backend Basics
3: Backend Applications
4: Backend Structure
5: Full-Stack Applications
6: Frontend Infrastructure
7: React
8: Advanced React
9: Advanced Topics
🧮
Algorithms
💼
Interview Prep
☺
User Experience
Powered By
GitBook
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
https://flexboxfroggy.com/
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
Previous
CSS.2.8: Float
Next
CSS.3.1: Flexbox Layout
Last modified
2mo ago
Copy link
Contents
Introduction
Distributing Boxes
Align Content
Align Items
Justify Content
Exercises
Position and Distribute Elements Using Flexbox
Further Reading