DEV Community

Cover image for Flexbox30: Learn Flexbox with 30 Tidbits
Samantha Ming
Samantha Ming

Posted on • Updated on • Originally published at github.com

Flexbox Cheat Sheet Flexbox30: Learn Flexbox with 30 Tidbits

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

Top comments (21)

Collapse
 
pavelloz profile image
Paweł Kowalski

When someone communicates to me the need to learn flexbox this is what i always give: flexboxfroggy.com/ :-)

Collapse
 
samanthaming profile image
Samantha Ming

Yup, i added that to the community suggestion! Hope you can also share with others Flexbox30 next time too 😆

Collapse
 
pavelloz profile image
Paweł Kowalski

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.

Thread Thread
 
fieldmarshallvague profile image
FieldMarshallVague

I agree, this is excellent, Samantha!

Thread Thread
 
samanthaming profile image
Samantha Ming

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 😊

Collapse
 
nickytonline profile image
Nick Taylor • Edited

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! 🔥

Collapse
 
samanthaming profile image
Samantha Ming

Wooo! didn't know about that! Will keep that for future reference, thanks! :)

Collapse
 
nitishk72 profile image
Nitish Kumar Singh

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

Collapse
 
samanthaming profile image
Samantha Ming

Thank you for the encouraging words! I hope to continue to knowledge share more with future series ...probably a JS one...still brainstorming 😆

Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦 • Edited

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?

Collapse
 
samanthaming profile image
Samantha Ming

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 🙂

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

This is a huge work. Thank you so much :)

Collapse
 
samanthaming profile image
Samantha Ming

Thanks for checking it out and happy you found it helpful 👏👏👏

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

Wow, this is really cool :)

Collapse
 
samanthaming profile image
Samantha Ming

Awesome, glad to hear! thanks!

Collapse
 
mzahraei profile image
Ardalan

Prefect Artikel 👌🏻👌🏻👌🏻

Collapse
 
anfossistudio profile image
AnfossiStudio

Thank you so much ❤❤🙏

Collapse
 
samanthaming profile image
Samantha Ming

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

Collapse
 
kvharish profile image
K.V.Harish

@samanthaming Thanks for sharing, appreciate it.

Collapse
 
samanthaming profile image
Samantha Ming

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

Collapse
 
soykevin111 profile image
SoyKevin111

Donde puedo ver todo eso, quiero aprender flex box