Responsive Layouts with @angular/Flex-Layout

on YouTube ↗47m

" summary

Library is a TypeScript, Angular-native layout engine (beta10) that injects inline Flexbox CSS at runtime and adds a responsive API with breakpoint aliases; demos show fxLayout and fxFlex sizing, fxShow/fxHide visibility controls, and responsive suffixes that reorder, hide, or swap image URLs. Claims: ~99% Flexbox browser support and no external CSS required. Built result runs in the demo, adapts on resize, and ships with an imperative MediaObserver for programmatic break-point handling.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 6:21Why Do We Use Flexbox Ess
3. 14:28Flexbox Css
4. 17:44The Flex Layout Library
5. 20:19Static Api
6. 24:56Demo
7. 27:24Quiz
8. 40:11Fx Show and Hide

" related talks

• 19mCSS Flexible Box Layout (Flex Box)Jeff Burtoft · CSSConf US 2013
• 15mFlexboxRyan Seddon · Web Directions South 2013
• 17mThe New CSS LayoutRachel Andrew · dotCSS 2015
• 40mSwaggy Layouts With FlexboxHaris Mahmood · Web Unleashed 2015
• 29mLaying Out The Future With Grid And FlexboxRachel Andrew · CSSConf.Asia 2016
• 47mCSS Layout Techniques: Replacing Floats with FlexboxBermon Painter · FITC Spotlight: Responsive Design 2016
• 49mPanel 4: Responsive LayoutRazvan Caliman, George Crawford, Andy Hume, Amber Weinberg · Edge Conference 2013
• 42mThe Magic You Have Been Missing in CSS LayoutsTrung Vo · Øredev 2025