DEV Community
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
Thanks for sharing Samantha.
Just FYI, although not necessary, but if you want, there is a liquid tag for GitHub when you post or comment. You can use it like this {%github https://github.com/samanthaming/Flexbox30 %}
in your post or comment and it looks like this 👇
samanthaming / Flexbox30
Learn Flexbox in 30 days with 30 code tidbits ✨
Flexbox30
Learn Flexbox in 30 days with 30 code tidbits
Table of Contents
- 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
- Aligning with Auto Margins
- Resources
- Say Hello
- Download & Share
- Contribution
- License
Flexbox Core Concepts
Day 1: Introduction
Before Flexbox, we were mainly using floats for layout. And for those CSS developers, we all know the frustrations and limitations of the old way -- especially the ability to vertically center inside a parent. Ugh, that was so annoying! Not anymore! Flexbox for the win!
Day 2: Flex Container & Flex Items
In order to get Flexbox to work, you need to set…
Looking forward to your next post! 🔥
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!
Yay! So happy to hear that 😄 that’s something that doesn’t get covered in most tutorials but always got me curious. So I’m glad you and others found that interesting 😊