In our first CSS episode, we discussed the foundations. In this special bonus episode, we continued the conversation by covering some more in-depth areas of CSS, like layouts with Grid and Flexbox, animations, media queries, naming conventions, pre-processors, and frameworks.
Here are some Flexbox cheat sheets to go along with the episode! 🐞
Shoutout to Emma for making these!
![[deleted user] image](https://res.cloudinary.com/practicaldev/image/fetch/s--b_Q_OnuL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--diPD5F8K--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://thepracticaldev.s3.amazonaws.com/i/99mvlsfu5tfj9m7ku25d.png)
[Deleted User]
Align Items
Flex Direction and Flex Wrap
Flex Items
Justify Content
You can also check out our CSS cheat sheets here:
You can listen to the full episode wherever you listen to podcasts!
Top comments (21)
Great post!! Bug illustration visually explains each of these properties so well. Is there a similar cheat sheet for CSS Grid system ? That would be so helpful especially for someone like me who uses flex box for almost everything.
I can make one if you'd like ;)
Awesome :)) and Thank you, I have learnt so much from you and Ali over the past 1 year. You guys are really helping a lot of people. Keep going :))
+1!
please do! it would be very helpful.
+1 !
Hey y'all, big fan of the podcast! Really love these cheat sheets you’ve been releasing as well. I did notice that for align-items it mentions flex-start as the default, but it’s my understanding (I went and confirmed here:
developer.mozilla.org/en-US/docs/W...) that ‘stretch’ is the default for flex items. Wanted to let you know! Again, really great stuff and can’t wait to see more like this!
Not to be super corrective, but to future readers the "initial value" of align-items is
normal, which behaves similar to flex-start. MDN is kinda confusing because the demo starts with stretch but clearly states the initial value at the bottom of the screen.Source: developer.mozilla.org/en-US/docs/W...
Thanks for making these!<3
I'm visual and it helps to see what each method does.
Would it be possible to make some kind of reference or links on whatever tech or resources ya'll are talking about for all your episodes?
I want to check them all out but I can't remember them all.
Hey! I think we have that, check out our show notes! ladybug.dev/episode/css-part-2/
Thank you so much! This is exactly what I was needing!
Yes! This is great. I'm constantly looking up the different flexbox properties because I can never remember the differences between
justify-content,align-items, etc.One of the things that confuses me is the difference between
justify-contentandalign-items.So simple and so well explained at the same time.
Thank you so much!
Nice work. This reminds me of flexboxfroggy.com
You ladies are killing it with the useful cheat sheets!
This is exactly what I've been needing to see. I have been away from web design for years and have been recently brushing up on css and these are perfect examples; simple, but elegant.
Love love LOVE these infographics! I just signed up to listen to your podcasts so I can keep up with y'all!
This is awesome!!!
I'm going to print these out to have at work.
Thank you all so much!
I did not know that you are on spotify too. From now on I am one of your listeners too 😅
📝Copy paste-able infographics please 👍
These cheat sheets are amazing!