Flexbox: The Ultimate Cheat Sheet for CSS Layouts! 🎨

Hi everyone! 👋 I’m Md Taqui Imam, and today i want to share you about CSS Flexbox with an awesome cheat sheet.

🌟 Flexbox is a powerful tool that helps us create flexible and responsive layouts easily.

Let’s dive in and learn how to use it!

What is Flexbox?

Flexbox, or the Flexible Box Layout, is a CSS module that provides a more efficient way to lay out, align, and distribute space among items in a container. It makes it easy to design flexible and responsive layouts without using floats or positioning.

The Basics

1. The Main Axis and Cross Axis

   • The main axis is the primary axis along which flex items are laid out. It can be horizontal (row) or vertical (column).

   • The cross axis is perpendicular to the main axis.

2. Flex Container and Flex Items

   • The flex container holds the flex items. It's created by setting display: flex on an element.

   • The flex items are the direct children of the flex container.

Flexbox Properties

1. Flex-Direction Property

    flex-direction: row;         /* Items arranged horizontally */
    flex-direction: row-reverse; /* Items arranged in reverse order horizontally */
    flex-direction: column;      /* Items arranged vertically */
    flex-direction: column-reverse; /* Items arranged in reverse order vertically */
   

2. Flex-Wrap Property

    flex-wrap: nowrap;       /* All items will be in one line */
    flex-wrap: wrap;         /* Items will wrap onto multiple lines */
    flex-wrap: wrap-reverse; /* Items will wrap onto multiple lines in reverse order */
   

3. Flex-Grow Property

    flex-grow: 1; /* Items will grow to fill the available space */
   

4. Flex-Shrink Property

    flex-shrink: 1; /* Items will shrink to fit into the container */
   

5. Flex-Basis Property

    flex-basis: 200px; /* Initial size of the item before growing or shrinking */
   

6. Flex Gap Property

    gap: 20px; /* Space between flex items */
   

Aligning and Justifying Items

1. Align-Items Property

    align-items: stretch;  /* Stretch items to fill the container */
    align-items: center;   /* Center items vertically */
    align-items: flex-start; /* Align items at the start of the cross axis */
    align-items: flex-end; /* Align items at the end of the cross axis */
    align-items: baseline; /* Align items along their baseline */
   

2. Justify-Content Property

    justify-content: flex-start; /* Align items at the start of the main axis */
    justify-content: flex-end;   /* Align items at the end of the main axis */
    justify-content: center;     /* Center items along the main axis */
    justify-content: space-between; /* Distribute items evenly with space between */
    justify-content: space-around;  /* Distribute items with space around them */
    justify-content: space-evenly;  /* Distribute items with equal space around them */
   

3. Align-Content Property

    align-content: flex-start;   /* Align the flex lines at the start of the cross axis */
    align-content: flex-end;     /* Align the flex lines at the end of the cross axis */
    align-content: center;       /* Center the flex lines along the cross axis */
    align-content: space-between; /* Distribute the flex lines with space between them */
    align-content: space-around;  /* Distribute the flex lines with space around them */
    align-content: space-evenly;  /* Distribute the flex lines with equal space around them */
   

4. Align-Self Property

    align-self: auto;     /* Default, inherits the value from the parent */
    align-self: stretch;  /* Stretch the item to fill the container */
    align-self: center;   /* Center the item vertically */
    align-self: flex-start; /* Align the item at the start of the cross axis */
    align-self: flex-end; /* Align the item at the end of the cross axis */
    align-self: baseline; /* Align the item along its baseline */
   

Conclusion

With this cheat sheet, you have a quick reference to all the essential Flexbox properties and how they work. Flexbox is a fantastic tool for creating responsive layouts, and now you can use it with confidence!

Happy coding! 💻✨

---

I hope you found this Flexbox cheat sheet helpful! If you have any questions or want to share your Flexbox creations, feel free to reach out.

Your friend in coding,

Md Taqui Imam