Flexbox Layout

What is Flexbox?

Flexbox (Flexible Box Layout) is a powerful 1D layout model in CSS. It allows you to align and distribute space among items in a container, even when their size is unknown or dynamic.

Core Properties

• justify-content — Aligns items along the main axis (horizontal by default).
• align-items — Aligns items along the cross axis (vertical by default).
• flex-direction — Defines the direction of the items (row or column).
• flex-wrap — Controls whether items wrap to the next line.

Example Syntax

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}