Flexbox, or the Flexible Box Layout, is a layout model in CSS that allows you to design complex layout structures with a more efficient and predictable way than traditional models, especially when you need to distribute space within items in complex layouts and when you want to align items in specific ways.

Here’s a cheat sheet to help you quickly remember and use flexbox properties.

Flex Container Properties

These are set on the parent element, turning it into a flex container.

1.display

• flex: Creates a block-level flex container.
• inline-flex: Creates an inline-level flex container.

2. flex-direction (default: row)

• row: Main axis is horizontal.
• row-reverse: Main axis is horizontal, reversed order.
• column: Main axis is vertical.
• column-reverse: Main axis is vertical, reversed order.

3. flex-wrap (default: nowrap)

• nowrap: All flex items will be on one line.
• wrap: Flex items wrap onto multiple lines.
• wrap-reverse: Flex items wrap onto multiple lines in reverse.

4. flex-flow

• A shorthand for ’flex-direction’ and ’flex-wrap’. For example, ’column wrap‘.

5. justify-content (Alignment along the main axis)

• flex-start: Items align to the start.
• flex-end: Items align to the end.
• center: Items align at the center.
• space-between: Equal space between items.
• space-around: Equal space around each item.
• space-evenly: Equal space between and around each item.

6. align-items (Alignment along the cross axis)

• flex-start: Items align to the start of the container.
• flex-end: Items align to the end of the container.
• center: Items center vertically (or horizontally based on flex-direction).
• baseline: Items align to their baselines.
• stretch: Items stretch to fill the container.

7. align-content (Alignment when there’s extra space in the cross-axis)

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

Flex Item Properties

These are set on the children of a flex container.

1. order
   • Assigns the item to a position within its container. Items with higher order values move to the end, while those with lower values move to the start.
2. flex-grow
   • Specifies how much the item will grow relative to the rest in the available space. For example, a value of ’2’ means the item will take up twice as much space as items with ’1‘.
3. flex-shrink
   • Dictates how the item will shrink relative to the rest. An item with a value of ’0’ won’t shrink.
4. flex-basis
   • Specifies the initial main size of the item. It can be a value like ’200px’, ’20%’, or ’auto‘.
5. flex
   • A shorthand for ’flex-grow’, ’flex-shrink’, and ’flex-basis’. For example, ’1 0 20px‘.
6. align-self
   • Overrides the container’s ’align-items’ property for individual flex items. It accepts the same values as ’align-items‘.

Conclusion

Flexbox provides a robust and versatile toolset for efficiently structuring and aligning web content. By mastering both the flex container and flex item properties, developers gain a streamlined method to design complex layouts with precision and ease. Whether you’re aiming to distribute space, align content in unique ways, or have fine-grained control over individual items within a container, flexbox offers a solution. This cheat sheet serves as a handy reference, ensuring that whether you’re a beginner or a seasoned developer, the power of flexbox is always at your fingertips. Remember, the beauty of web design lies in flexibility, and flexbox truly embodies that principle.