Learn Flexbox in 30 days with 30 code tidbits ✨
Topics
- Introduction
- Flex Container & Flex Items
- Immediate Child Only
- Flexbox Axes
- Flexbox Module
- Parent Properties
- Display
- block vs inline
- flex-direction
- flex-wrap
- flex-flow
- justify-content [row]
- space-around vs space-evenly
- justify-content [column]
- align-items [row]
- baseline
- align-items [column]
- align-content
- Child Properties
- order
- flex-grow
- flex-grow calculation
- flex-shrink
- flex-shrink calculation
- flex-basis
- flex-basis vs widths
- flex
- align-self
- Flexbox Properties
- Flexbox Cheatsheet
🎉 So excited to finally release the entire series. I've been posting these as daily tidbits on my social media. You can now binge and download all 30 tidbits all at once!
Available FREE:
Say Hello! Instagram | Twitter | Blog | SamanthaMing.com
Top comments (21)
When someone communicates to me the need to learn flexbox this is what i always give: flexboxfroggy.com/ :-)
Yup, i added that to the community suggestion! Hope you can also share with others Flexbox30 next time too 😆
Yes, for sure. Your explanation of how flex-basis, flex-shrink, flex-grow and calculations underneath it is probably the best in the web, so im adding it to favorites for everyone who wants to understand it.
Flex frogs are more for a beginners (backend devs) who want to just place items around in not-so-terrible manner.
I agree, this is excellent, Samantha!