# Flex Container — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

Source: https://www.skillbyai.com/en/css/css-flex-container

> Build one-dimensional layouts with display: flex, main and cross axes, alignment and wrapping.

## 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.