Flowing & Flexing
Unlike the printed page, web content and context can be unpredictable. CSS provides tools to manage that uncertainty, aligning & distributing objects on the page. We’ll talk about normal flow, intrinsic and extrinsic sizing, logical properties, box sizing & alignment, and the flexible box model.
CodePen Demos
- Two-Dimensional Viewport
- Flow (boxes)
- Flow (inline)
- Text lines use inline axis
- Inline axis depends on writing mode
- Inline flow depends on language direction
- Blocks of text stack…
- Flow (block)
- Floats and the Block Formatting Context by Rachel Andrew
- Block Formatting Context: Margin Collapsing by Rachel Andrew
- A BFC preventing wrapping of floats. by Rachel Andrew
- Inline Splitting
- List Item Marker
- Intrinsic Sizing
- Flow-relative Logical Dimensions
- Logical (flow-relative) Sides
- Logical properties demo: inline form by Hussein Al Hammad
- Block & Inline Shorthands
- Flex-flow
- Alignment: placing content vs items
- Block Box Alignment
- Absolute Position Box Alignment
Resources
- CSS Display Module Level 4
- CSS Backgrounds and Borders
- Can I Use:
display: contents - Can I Use:
display: flow-root - Understanding CSS Layout And The Block Formatting Context by Rachel Andrew
- Intrinsic size keywords: browser compatibility
- CSS logical properties and values
- Flex shorthand values
- CSS Box Alignment