CSS Flexbox

Interactive Demo

What is Flexbox?

Flexbox is a one-dimensional layout method in CSS that allows you to control the size, positioning, and spacing of your elements.
It is especially useful for creating responsive designs, as it easily adapts to different screen sizes.

Flexbox Directions

Visual Example: Row

1
2
3
4
5
6

CSS Code

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

Key Points

  • Default direction

  • Items arranged horizontally

  • Useful for horizontal navigation bars