🧱 CSS Tutorial: Flexbox Properties

📌 Introduction

Flexbox (Flexible Box Layout) is a modern CSS layout system designed to make alignment, spacing, and distribution of items super easy—especially in responsive layouts. Flexbox works on a **parent container (flex container)** and its **children (flex items)**. This tutorial explains every Flexbox property clearly and visually. 🎨✨

🧩 Flexbox Property Categories

Flexbox properties fall into two groups:

  • 📦 Container Properties (applied to the flex parent)
  • 📌 Item Properties (applied to flex children)

📦 Flex Container Properties

1. display

Make a flex container

.box { display: flex; }

2. flex-direction

Controls the direction of items inside the container.

  • row (default)
  • row-reverse
  • column
  • column-reverse

Code Snippet

.container {
  flex-direction: row;
}

3. flex-wrap

Controls whether items wrap to next line.

  • nowrap (default)
  • wrap
  • wrap-reverse

flex-wrap

.container {
  flex-wrap: wrap;
}

4. flex-flow

Shorthand for flex-direction + flex-wrap.

Code Snippet

flex-flow: row wrap;

5. justify-content

Aligns items horizontally (main axis).

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

Code Snippet

justify-content: center;

6. align-items

Aligns items vertically (cross axis).

  • stretch (default)
  • center
  • flex-start
  • flex-end
  • baseline

Code Snippet

align-items: center;

7. align-content

Controls spacing between rows when wrap is enabled.

Code Snippet

align-content: space-between;

📌 Flex Item Properties

1. order

Controls the order of appearance (default = 0).

Code Snippet

.item { order: 2; }

2. flex-grow

Determines how much space an item takes compared to others.

Code Snippet

.item { flex-grow: 1; }

3. flex-shrink

Controls how items shrink when space is limited.

Code Snippet

.item { flex-shrink: 0; }

4. flex-basis

Initial size of a flex item before space distribution.

Code Snippet

.item { flex-basis: 200px; }

5. flex (shorthand)

Shorthand for flex-grow, flex-shrink, flex-basis.

flex shorthand

flex: 1 1 200px;

6. align-self

Overrides align-items for an individual item.

Code Snippet

.item { align-self: center; }

🔥 Full Example

Complete Flexbox Example

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  padding: 20px;
}

📊 Flexbox Property Table

PropertyTypeDescription
flex-directionContainerSets main axis direction
justify-contentContainerAligns items on main axis
align-itemsContainerAligns items on cross axis
flex-growItemAllows items to take remaining space
flex-shrinkItemAllows items to shrink when needed
flexItemShorthand for size behavior
>>“Flexbox isn't just a layout system — it’s a powerful tool for building dynamic, responsive, beautifully aligned UI.” ✨

🎉 Conclusion

Flexbox simplifies layout creation, enabling easy alignment, spacing, and responsive structure without complex floats or positioning. With these properties mastered, you can build any modern layout—from navbars to grids to dashboards—quickly and cleanly. 🚀