Swaggy Layouts With Flexbox

on YouTube ↗40m

" summary

Shows concrete techniques: use display:flex plus margin-left: auto to build navs, use justify-content and align-items to vertically center responsive blocks, and combine flex: 1 0 auto with fixed 200px bases for a working Holy Grail layout. Reports real constraints: IE8/9 lack support and ScrollMagic fails to measure flex items. Describes a shipped Global Mail iOS webview using Safari 7.1+ where flexbox worked with no major performance issues.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 8:27property definition
3. 8:38display: flex
4. 10:034 initial concepts
5. 10:25main axis
6. 20:05flex-basis

" related talks

• 54mFlexboxZoe Mickley Gillenwater · CSS Day 2015
• 47mCSS Layout Techniques: Replacing Floats with FlexboxBermon Painter · FITC Spotlight: Responsive Design 2016
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014
• 15mFlexboxRyan Seddon · Web Directions South 2013
• 17mThe New CSS LayoutRachel Andrew · dotCSS 2015
• 44mCSS Layout Techniques: Replacing Floats With FlexboxBermon Painter · Web Unleashed 2016
• 42mThe Magic You Have Been Missing in CSS LayoutsTrung Vo · Øredev 2025
• 29mLaying Out The Future With Grid And FlexboxRachel Andrew · CSSConf.Asia 2016