📌 Introduction

Flexbox (Flexible Box Layout) is a powerful CSS layout module designed to create responsive and easy-to-control UI alignment. The properties that apply to the flex container determine how flex items are arranged, aligned, wrapped, and distributed. Mastering these container-level properties is essential for building modern layouts. ⚡📐

📍 What is a Flex Container?

Any element becomes a flex container when you apply:

.container { display: flex; }

Once enabled, all direct children become flex items, and container properties affect their positioning.

🔥 Flex Container Properties

1. display

Enables Flexbox on an element.

display: flex;     /* block-level flex */ 
display: inline-flex; /* inline-level flex */

2. flex-direction

Controls the direction of flex items.

.container {
  flex-direction: row;
}

3. flex-wrap

Controls whether flex items wrap to the next line.

flex-wrap: wrap;

4. flex-flow (shorthand)

A shorthand for flex-direction + flex-wrap.

flex-flow: row wrap;

5. justify-content

Controls alignment of items along the main axis.

justify-content: center;

6. align-items

Aligns items along the cross axis (perpendicular to flex-direction).

align-items: center;

7. align-content

Controls spacing between multiple wrapped rows/columns of flex items.

align-content: space-between;

8. gap

Controls spacing between flex items (like grid-gap).

gap: 20px;

9. row-gap & column-gap

A more specific version of gap.

row-gap: 10px;
column-gap: 20px;

📊 Summary Table

🧠 Tips & Best Practices

🎉 Conclusion

Flexbox container properties form the foundation of powerful, modern layout systems. From direction and alignment to wrapping and spacing, they give you full control over how flex items behave. Master them — and building responsive UI becomes effortless. 🚀