DEV Community

loading...
Cover image for A Simple CSS Flexbox Cheat Sheet

A Simple CSS Flexbox Cheat Sheet

heyonuoha profile image Favor Onuoha ・3 min read

Flexbox is amazing and they make positioning in CSS much, much better than raw positioning (Absolute, Relative, etc), but they can sometimes be very easy to forget or get mixed up with due to its structural nature.

Both Pros and Beginners struggle with keeping all the structural differences and style properties at heart so that is why I will be breaking down in sections this great cheat sheet by Joni Balogna which I found very great and amazing.

Flexbox Structure

Alt Text

Here we are shown the structure of flexboxes and how their origins are labeled.

We see the Main Axis (Horizontal Axis) and the Cross Axis (Vertical Axis)

Rows and Columns [Orientation]

Alt Text

Here we are shown the properties that activate the flexbox styles and the options we have for display orientation.

Positioning On Main Axis

Alt Text

Here we are shown how to position flex items on the Main Axis. Where do you want it? start, center, end?

Space Management

Alt Text

Here we are shown how to manage variable space of our items and how we want them displayed in a container. Based on our viewport, we can set how we want them to align, either on the same line or overflow.

Positioning On Cross Axis

Alt Text

Here we are shown how to position flex items on the Main Axis. We could either set our flex items to stretch across the axis or start at the end or center.

Row Management

Alt Text
Alt Text

Here we are shown the property options we have when we have multiple rows and how we can position them in a container.

Item Order

Alt Text

Here we are shown the order property which sets the order to lay out an item in a flex container. Items in a container are sorted by ascending order value and then by their source code order.

Item Growth

Alt Text

Here we are shown the flex-grow property which sets the flex-grow factor of a flex item's main size.

Alignment

Alt Text

Here we are shown various alignment flex properties.

Conclusion

Thank you for reading πŸ”₯πŸ”₯πŸ”₯, and I hope you found this article useful πŸ”₯

Here is the link to the full cheat cheat

If you have any questions or your just wanna chat, feel free to DM me

If you enjoyed reading, please consider following me here on Dev.to and also on Twitter @ heyOnuoha so you don’t miss out on new content on topics like:

  • Web Development (JS and Python)
  • Improving as a developer
  • Machine Learning

Support Me :

πŸ‘‰ Follow Me on Twitter
πŸ‘‰ Buy me a β˜•
Buy Me A Coffee

References

Discussion (8)

Collapse
ash_bergs profile image
Ash

I swear it's impossible to have too many CSS cheat sheets. There's so much to know, remember, and explore - and I always benefit from a reminder as well structured at this one. Thanks for the write up!

Collapse
heyonuoha profile image
Favor Onuoha Author

Thank you Ash, I am glad you enjoyed it ❀️

Collapse
moinulmoin profile image
Moinul Moin

Awesome❀

Collapse
heyonuoha profile image
Favor Onuoha Author

Thank you Moinul, Hope you enjoyed reading ?

Collapse
moinulmoin profile image
Moinul Moin

yesss, man

Thread Thread
heyonuoha profile image
Favor Onuoha Author

I am glad to hear that :)

Collapse
asif0228 profile image
Asif Uddin

awesome

Collapse
heyonuoha profile image
Favor Onuoha Author

Thanks for reading Asif.

Forem Open with the Forem app