This document provides an overview of different CSS layout models including flexbox and CSS grids. It discusses when each model should be used such as controlling elements along rows and columns or defining template areas for page layouts. Resources for learning more are provided, including following experts like Jen Simmons and reading specifications on the W3C website or guides on CSS Tricks. In the end, the document confirms that browsers do support these CSS layout models.
20. When to use Flexbox
- Control elements along a row or column axis
20
- Change source order of elements
- Distribute space among elements automatically
23. When to use Flexbox
- Control elements along a row or column axis
23
- Change source order of elements
- Distribute space among elements automatically
- Horizontal and Vertical centering
25. Recap:
- Control elements along a row or column axis
25
- Change source order of elements
- Distribute space among elements automatically
- Horizontal and Vertical centering
40. When to use Grid
- Control elements along rows AND columns
40
- Elements need to occupy same space or overlap
- Defining template areas for a full page layout
44. Recap:
- Control elements along rows AND columns
44
- Elements need to occupy same space or overlap
- Defining template areas for a full page layout
52. Resources
Who to follow if you want to learn more:
▣ Jen Simmons
▣ Rachel Andrew
▣ Wes Bos
Reading Materials
▣ W3 Spec - easy to read
▣ CSS Tricks Guides
52