# Flex Container — CSS

Source: https://www.geekswithgeeks.com/en/css/css-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.

```css
.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.