CSS

CSS

🎯 CSS flex-direction Property

The flex-direction CSS property defines the direction of items inside a Flexbox container.

It controls whether flex items are arranged horizontally, vertically, or in reverse order.

πŸ”Ή Why Use flex-direction?

  • Benefits

  • πŸ“Œ Controls layout direction in Flexbox
  • πŸ“Œ Builds responsive UI layouts easily
  • πŸ“Œ Useful for navigation bars and card layouts
  • πŸ“Œ Helps create both row and column designs

πŸ”Ή flex-direction Values

  • row β†’ Horizontal layout (left to right) (default)
  • row-reverse β†’ Horizontal reversed (right to left)
  • column β†’ Vertical layout (top to bottom)
  • column-reverse β†’ Vertical reversed (bottom to top)
  • initial β†’ Resets to default (row)

🧩 Basic Example

CSS

.container {
    display: flex;
    flex-direction: row;
}

In this example, flex items are arranged horizontally from left to right.

  • 🧠 Summary

  • flex-direction defines the direction of flex items inside a container.
  • It is a core Flexbox property for layout control.
  • Supports row, column, and reverse directions.
  • Widely used in modern responsive UI design.
CSS break-after
CSS flex-wrap