CSS Layout Techniques: Replacing Floats With Flexbox

on YouTube ↗44m

" summary

Shows exact CSS that centers a box with a few rules and replaces float hacks by using flex properties on the parent, building real layouts: media object, Holy Grail, panes, responsive card grid and a sticky footer. Demonstrates display:flex plus justify-content and align-items for centering, uses order and flex-basis and flex-grow/shrink to rearrange and size items, links to live CodePen examples, notes browser support (Chrome 21+, Safari 6.1+, FF28+, partial IE10/11) and DOM-order accessibility caveats.

AI-written summary · about

" chapters (12)

1. 0:00Intro
2. 0:17Overview
3. 1:30Holy Grail Layout
4. 3:59ClearFix
5. 5:55Grid Systems
6. 9:08Flexbox
7. 16:39LineItems
8. 22:39Resources
9. 23:42Complex Layouts
10. 27:34Holy Grail Example
11. 33:44DOM Order
12. 35:33Browser Support

" related talks

• 47mCSS Layout Techniques: Replacing Floats with FlexboxBermon Painter · FITC Spotlight: Responsive Design 2016
• 44mBox AlignmentChen Hui Jing · Beyond Tellerrand Berlin 2018
• 15mFlexboxRyan Seddon · Web Directions South 2013
• 54mFlexboxZoe Mickley Gillenwater · CSS Day 2015
• 17mThe New CSS LayoutRachel Andrew · dotCSS 2015
• 43mBox AlignmentChen Hui Jing · CSS Day + UX Special 2018
• 32mFlexbox & Grid How to Style with styleBrian Barrow, Josh Holladay · UtahJS Conf 2017
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014