CSS Layout Techniques: Replacing Floats with Flexbox
summary
Claims that Flexbox replaces float hacks by making centering, equal-height columns and gutters trivial and shows working examples: a full-height two-pane centered layout, a “holy grail” header/content/sidebars/footer, responsive card grid and an email-style three-column app. Uses concrete CSS: display:flex, justify-content: space-between, child controls like flex: 1 0 30% and reordering via order: -1. Notes browser support: modern browsers full support, IE10/11 need prefixes, IE9 and below fail; flags accessibility issues from visual reorder breaking DOM/tab order.
AI-written summary · about
chapters (28)
- 0:00Introduction
- 1:05Recap
- 1:58The Holy Grail
- 2:47The simpler times
- 4:20The dark times
- 5:01CanLock
- 5:58ClearFix
- 7:08Layout History
- 10:13Flexbox Containers
- 11:10Flex Direction
- 11:53Reverse Direction
- 12:38Flexwrap
- 13:30Default
- 13:51Flip
- 14:20Shorthand
- 16:05Space Between
- 17:34Flex Items
- 18:10Flex Start
- 19:08Flex Item Center
- 20:23Flexbox Child Elements
- 21:18Order
- 22:48FlexGrow
- 25:38Shrink
- 26:43Flexbox Frogging
- 27:18Flexbox in 5
- 28:05Flexbox vs Bootstrap
- 29:21Flexbox Example
- 41:53Responsive Design Patterns
