Using Firefox DevTools to understand modern layout techniques

@hj_chen

🇲🇾 🏀 👩‍💻 📝 🦊

🥑 Developer Advocate 🥑

Back Next

Why is vertical harder than horizontal?

🙆

🤷

Back Next

Back Next

https://www.chenhuijing.com/demos/layout-triple-team/

Back Next

`initial`	`0 1 auto`	cannot grow but can shrink when there isn't enough space
`auto`	`1 1 auto`	can grow and shrink to fit available space
`none`	`0 0 auto`	cannot grow or shrink, AKA inflexible
`<positive-number>`	`<positive-number> 1 0`	can grow and shrink, extent of growth depends on flex factor

Back Next

Back Next

Back Reset