Lightning Talk: Think Flex

on YouTube ↗11m

" summary

Claims that modern browsers all support flexbox (some with older specs) and recommends autoprefixer and Modernizr for compatibility and fallbacks. Explains concrete properties: flex-direction, flex-wrap, justify-content, align-items, align-content and the item trio flex-grow/flex-shrink/flex-basis with how they rotate between main and cross axes. Shows working examples: equal-height card grids, reliable vertical centering, split-screen panels, multi-column lists and dashboards, replacing floats/clearfix hacks and simplifying layout code.

AI-written summary · about

" chapters (9)

1. 0:00Introduction
2. 1:04Why use Flexbox
3. 2:51Browser support solutions
4. 3:39Flexbox basics explained
5. 6:40Flex item properties
6. 7:27Vertical alignment demo
7. 8:15Vertical centering demo
8. 9:21Layouts benefiting from Flexbox
9. 10:48Summary and call to action

" related talks

• 47mCSS Layout Techniques: Replacing Floats with FlexboxBermon Painter · FITC Spotlight: Responsive Design 2016
• 54mFlexboxZoe Mickley Gillenwater · CSS Day 2015
• 41mFlexbox RevolutionRaphaël Goetter · DevFest Paris 2015
• 15mFlexboxRyan Seddon · Web Directions South 2013
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014
• 29mLaying Out The Future With Grid And FlexboxRachel Andrew · CSSConf.Asia 2016
• 20mBuilding a Modern Web UIRico Sta. Cruz · CSSConf.Asia 2014
• 17mThe New CSS LayoutRachel Andrew · dotCSS 2015