A Simple CSS Flexbox Cheat Sheet
Tags: html, css, design, beginners
Published: 2021-05-27 16:41:48

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](https://jonitrythall.com/) which I found very great and amazing.

# **Flexbox Structure**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iqeyjf7optbd0dgvghz.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h3pmdpz03azgn1dztj5.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trpdt2kmequ5t74excnj.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g8nywzz1i8bp9nlq9ek.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oht32bbys3iyvt5ux9e0.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgvdgmyllf87kb4hwk95.png) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaa495i971py9ig80v3w.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxi0v2ln0j85h6pg1u60.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/604f3gl4x6257eilucyv.png)

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

# **Alignment**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kepbvjbug7h63n5kkfd9.png)

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](https://jonitrythall.com/content/flexboxsheet.pdf) to the full cheat cheat

If you have any questions or your just wanna chat, feel free to [DM me](https://twitter.com/heyOnuoha)

If you enjoyed reading, please consider following me here on Dev.to and also on Twitter @ [heyOnuoha](https://twitter.com/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](https://twitter.com/heyOnuoha/)
👉 Buy me a ☕
<a href="https://www.buymeacoffee.com/heyOnuoha" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>


# **References**
* [Joni Balogna](https://jonitrythall.com/)
* [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/)
* [Flexbox cheat sheet](https://jonitrythall.com/content/flexboxsheet.pdf)