Lesson 10 / 28

Flex Container

One line — display: flex — turns a parent into a flexible layout.

Main axis & cross axis

display: flex lays children along a main axis (row by default). justify-content aligns along the main axis, align-items aligns along the cross axis.

The core container properties

This centers three items both horizontally and vertically.

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

flex-wrap

By default items squeeze onto one line and shrink. flex-wrap: wrap lets them drop to a new line instead — essential for responsive rows.