loading...
Cover image for Flexbox30: Learn Flexbox with 30 Tidbits

Flexbox Cheat Sheet Flexbox30: Learn Flexbox with 30 Tidbits

samanthaming profile image Samantha Ming Updated on ・1 min read

Learn Flexbox in 30 days with 30 code tidbits ✨

Topics

  1. Introduction
  2. Flex Container & Flex Items
  3. Immediate Child Only
  4. Flexbox Axes
  5. Flexbox Module
  6. Parent Properties
  7. Display
  8. block vs inline
  9. flex-direction
  10. flex-wrap
  11. flex-flow
  12. justify-content [row]
  13. space-around vs space-evenly
  14. justify-content [column]
  15. align-items [row]
  16. baseline
  17. align-items [column]
  18. align-content
  19. Child Properties
  20. order
  21. flex-grow
  22. flex-grow calculation
  23. flex-shrink
  24. flex-shrink calculation
  25. flex-basis
  26. flex-basis vs widths
  27. flex
  28. align-self
  29. Flexbox Properties
  30. Flexbox Cheatsheet

A summary of all 30 flexbox code tidbits

🎉 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

Posted on by:

samanthaming profile

Samantha Ming

@samanthaming

Frontend Developer sharing weekly JS, HTML, CSS code tidbits 🔥Discover them all on samanthaming.com 💛

Discussion

markdown guide
 

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 👇

GitHub logo samanthaming / Flexbox30

Learn Flexbox in 30 days with 30 code tidbits ✨

Flexbox30

Learn Flexbox in 30 days with 30 code tidbits

Table of Contents

  1. Introduction
  2. Flex Container & Flex Items
  3. Immediate Child Only
  4. Flexbox Axes
  5. Flexbox Module
  6. Parent Properties
  7. Display
  8. block vs inline
  9. flex-direction
  10. flex-wrap
  11. flex-flow
  12. justify-content [row]
  13. space-around vs space-evenly
  14. justify-content [column]
  15. align-items [row]
  16. baseline
  17. align-items [column]
  18. align-content
  19. Child Properties
  20. order
  21. flex-grow
  22. flex-grow calculation
  23. flex-shrink
  24. flex-shrink calculation
  25. flex-basis
  26. flex-basis vs widths
  27. flex
  28. align-self
  29. Flexbox Properties
  30. Flexbox Cheatsheet
  31. Aligning with Auto Margins
  32. Resources
  33. Say Hello
  34. Download & Share
  35. Contribution
  36. 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!

Flexbox Introduction

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 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 👏👏👏

 

Prefect Artikel 👌🏻👌🏻👌🏻

 
 

You're very welcome! thanks for checking out the series 🙂

 
 

You're very welcome! Glad you found it helpful! 😃

 

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 😆