Present and Future of CSS Layout
summary
Demonstrates concrete layout features and their current compatibility: Flexbox unprefixed in modern browsers (Chrome, Firefox, IE11; iOS/Safari still prefix), live examples show centering, ordering, wrapping and flexible inputs working; Grid behind prefixes/experimental in Firefox and Chrome with a planned unprefixed ship later in the year. Shows practical patterns (nav centering, chat reverse column, sticky recipe table, holy‑grail reordering), points out a Chrome bug with visibility:collapse on flex items, and argues grid’s ASCII template makes complex responsive swaps trivial.
AI-written summary · about
chapters (15)
- 0:00Start
- 3:14started with a float based layout design
- 4:51adding a flexible length unit
- 7:02use a webkit prefix flex box
- 9:56use some of the alignment properties on the flex box
- 12:22make the li into a flex box
- 12:40set a default for all of the flex items
- 15:26center a paragraph of text
- 16:37turn the body into a flexbox
- 18:53make it a column flex box
- 28:50make the div wrapper around the main content stuff
- 29:30make it a flexbox
- 35:06the grid layout
- 44:17polyfill a 2-dimensional layout
- 47:10stop using grid frameworks
