Flexbox: From the Heady Highs to the Hangover

on YouTube ↗57m

" summary

An introduction to practical Flexbox usage: explains common surprises and pitfalls (browser bugs, inconsistent behaviors, responsive layout breakage) and clarifies differences between properties like flex-grow: 1 versus flex: 1. Offers concrete guidance and troubleshooting to recover from early mistakes and build reliable, production-ready Flexbox layouts.

AI-written summary · about

" chapters (12)

1. 0:00Flexbox introduction
2. 2:37Key Flexbox properties
3. 6:58Property priorities
4. 11:02Sizing quiz
5. 17:10Flex-grow and flex-shrink
6. 21:48Common bugs and fixes
7. 25:50Spec interpretations
8. 32:55Flexbox vs floats
9. 36:33Reusable patterns
10. 44:04Useless properties
11. 52:32Tools and resources
12. 54:24Q&A

" related talks

• 47mBefore and After FlexboxEmily Meroni, Giorgia Baroffio · Voxxed Days Ticino 2017
• 11mLightning Talk: Think FlexOleksii Kachura · Front-Trends 2016
• 50mFlexboxStephen Hay · CSS Day 2013
• 08mBehind the mysteries of flexbox: Why it doesn't do what I want?Tomáš Pustelník · FrontKon 2023
• 41mFlexbox RevolutionRaphaël Goetter · DevFest Paris 2015
• 47mFlexroxRaphaël Goetter · DevFest Nantes 2015
• 15mFlexboxRyan Seddon · Web Directions South 2013
• 29mLaying Out The Future With Grid And FlexboxRachel Andrew · CSSConf.Asia 2016