DEV Community

Discussion on: Flexbox30: Learn Flexbox with 30 Tidbits

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! :)