Basis, grow and shrink | In a Rocket

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Flexbox & CSS Grid | Starter

Getting started

Environment setup
Context: W3C & browsers

Flexbox

Container and items
Direction: row and column
Wrap items
Flow: direction + wrap shorthand
Order
Basis, grow and shrink
Justify
Align: Content
Align: Items
Place-content: justify + align shorthand

CSS Grid

Container and items
Building: Explicit and implicit grid
Building: Nested grids (basic)
Sizing: Fraction
Sizing: Minmax
Sizing: Repeat
Sizing: Auto-fit and auto-fill
Placing: Lines
Placing: Areas
Placing: Areas via implicit names
Alignment & spacing: Gaps
Ordering: The order property
Ordering: Overlap items with z-index
Support and fallbacks

Teach online with

Basis, grow and shrink

FlexGrid-Flex-Basis_Grow_Shrink.pdf

Download

FlexGrid-Flex-Basis_Grow_Shrink.pdf

Complete and Continue