CSS wizarding world

By Chen Hui Jing / @hj_chen

Chen Hui Jing
Jing
@hj_chen
🇲🇾 🏀 👩‍💻 📝 🦊
Mozilla TechSpeakers

https://events.mozilla.org/techspeakers

Nexmo Developer Relations

🥑 Developer Advocate 🥑

Nexmo
Firefox DevTools ❤️ HTML CSS
Magic
Layout triple team

Demo time

Flex shorthand

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

Useful references

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font used is Magnetic Pro, by Olivier Gourvat