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
- Flow (boxes)
- Display modes
- Logical (flow-relative) Sides
- Logical properties demo: inline form by Hussein Al Hammad
- Block & Inline Shorthands
- Flow (inline)
- Flow (block)
- Inline Splitting
- Intrinsic Sizing
- Margins collapse & floats overflow
- 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
- Alignment in absolute position
- Safe & Unsafe Alignment
- Flexbox is inline-ish
- Flexbox alignment
- Block Flow Align-Content
- CSS gradient-art decorations
Resources
- CSS Display Module Level 4
- CSS Backgrounds and Borders
- Can I Use:
display: contents
- Can I Use: Multi-Value Display
- CSS logical properties and values
- Intrinsic size keywords: browser compatibility
- Understanding CSS Layout And The Block Formatting Context by Rachel Andrew
- CSS Box Alignment
- Firefox Flexbox Inspector
- Can I Use: Block alignment
- Flex shorthand values