DEV Community

Cover image for Flexbox Cheat Sheets
Ali Spittel for Ladybug Podcast

Posted on

Flexbox Cheat Sheets

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

[Deleted User]

Align Items

align-items: 4 different graphics showing the values align-items can take. flex-start has all the items at the top of the container. flex-end has all the items at the bottom of the container. center has all the items at the vertically aligned in the container. stretch has all the items stretched vertically in the container.

Flex Direction and Flex Wrap

flex-direction: showing the row value where all items are going in a horizontal direction, row-reverse where it's also in a horizontal direction but in the opposite direction. showing the column value where all items are going in a vertical direction, column-reverse where it's also in a vertical direction but in the opposite direction.<br>
flex-wrap: 3 different graphics showing the 3 potential values. nowrap where the children all stay on the same line, adapting to size of the container. wrap where the children keep their width and float onto the next line. and wrap-reverse where they wrap but going in the opposite direction.

Flex Items

Flexbox item properties order: the order in which your flex items are laid out within your flex container. Default order: 0, where all items are in the order they are in the html. Explicit order value allows you to change the order of the items in css. Flex-grow: gives your flex items the ability to grow within your container. Default flex-grow: 1, all items are the same size. Explicit flex-grow value: certain items fill the surrounding space. align-self: lets your flex items override align-items. align-self: flex-end; puts the item at the end of the flex container.

Justify Content

justify-content: 4 different graphics showing the values justify-content can take. flex-start has all the items at the left side of the container. flex-end has all the items at the right side of the container. center has all the items at the horizontally aligned in the container. space-between has all the items evenly spaced. space-around has all the items evenly spaced, with margins on the sides.

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)

zombierobo profile image
Hasmukh Suthar

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.

emmabostian profile image
Emma Bostian ✨

I can make one if you'd like ;)

zombierobo profile image
Hasmukh Suthar

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

Thread Thread
popcornthad profile image


hassam7 profile image
Hassam Ali

please do! it would be very helpful.

bmitchinson profile image
Ben Mitchinson

+1 !

brob profile image
Bryan Robinson

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

bstewart profile image
Brayden Stewart

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.


donnacamos profile image
Donna Amos

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.

aspittel profile image
Ali Spittel

Hey! I think we have that, check out our show notes!

donnacamos profile image
Donna Amos

Thank you so much! This is exactly what I was needing!

joeattardi profile image
Joe Attardi

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.

codingsam profile image
Coding Sam

One of the things that confuses me is the difference between justify-content and align-items.
So simple and so well explained at the same time.
Thank you so much!

kp profile image

Nice work. This reminds me of

garrett profile image
Garrett / G66

You ladies are killing it with the useful cheat sheets!

thefluxapex profile image
Ian Pride

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.

sansseryph profile image

Love love LOVE these infographics! I just signed up to listen to your podcasts so I can keep up with y'all!

jsgoose profile image
Jonathan Sexton

This is awesome!!!

I'm going to print these out to have at work.

Thank you all so much!

afozbek profile image
Abdullah Furkan Özbek

I did not know that you are on spotify too. From now on I am one of your listeners too 😅

roblav96 profile image
Robert Laverty

📝Copy paste-able infographics please 👍

waylonwalker profile image
Waylon Walker

These cheat sheets are amazing!