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
- 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: flexon an element. - The flex items are the direct children of the flex container.
Flexbox Properties
- 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
- 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,
