Flex & Containers
Unlike the printed page, web content and context can be unpredictable. CSS provides tools to manage that uncertainty – either explicitly with tools like media and container queries, or implicitly with flexbox.
CodePen Demos
- Flexbox is inline-ish
- Flexbox alignment
- CSS gradient-art decorations
- Flex-basis layouts?
- (Flex)box alignment
- Block flow align-content
- Alignment in absolute position
- CSS is awesome
- Media vs container
- Understanding containment
- Containing size
- Enter the 36 chambers
- Size queries, relative/var units
- Flexbox cards, with container queries
- Container query bookstore
- Container query blinds v2
- Style query button themes
- Sticky header state query!
Resources
- Firefox flexbox inspector
- Shorthand values
- Can I use absolute position alignment
- Responsive web design by Ethan Marcotte
- Selector queries by Andy Hume
- Being relaxed
- Ancestor layout loops with single-axis containment
- Propagating up in CSS by Jim Nielsen
- The large, small, and dynamic viewports by Bramus Van Damme
- Can I use container style queries
- CSSWG issue for state queries
- Chrome explainer