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!
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 😊
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 👇Learn Flexbox in 30 days with 30 code tidbits ✨
Flexbox30
Learn Flexbox in 30 days with 30 code tidbits✨
Table of Contents
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! 🔥
Wooo! didn't know about that! Will keep that for future reference, thanks! :)
I was watching all your Insta post and I will definitely say the you did a really hard work.
Thank for everything
You are gem for Open Source
Thank you for the encouraging words! I hope to continue to knowledge share more with future series ...probably a JS one...still brainstorming 😆
I would have thought you would have posted all the tidbits here instead of linking them offsite. Github use's markdown, so wouldn't it be effortless to copy and paste it here?
Actually, that was my initial plan! but then all the images had to be manually uploaded one at a time...so i just gave up 😣 I put in a lot of effort into the github read me to make sure it's easy to navigate and follow, which should improve the reading experience. Hope you don't mind too much on the extra click and check out the github post 🙂
This is a huge work. Thank you so much :)
Thanks for checking it out and happy you found it helpful 👏👏👏
Wow, this is really cool :)
Awesome, glad to hear! thanks!
Prefect Artikel 👌🏻👌🏻👌🏻
Thank you so much ❤❤🙏
You're very welcome! thanks for checking out the series 🙂
@samanthaming Thanks for sharing, appreciate it.
You're very welcome! Glad you found it helpful! 😃
Donde puedo ver todo eso, quiero aprender flex box