什么是 Flexbox，您如何使用它来居中内容？

Question

Accepted Answer

**Flexbox** 是一种一维布局系统——它在单一**行**或**列**中排列项目，并沿着这条线分配空间。它是解决对齐和间距问题的现代方案，这些问题以前需要 floats 和 hacks。

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## 两个轴

Flexbox 有一个**主轴**（项目流向的方向）和一个**交叉轴**（垂直方向）。属性映射到这两个轴：

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## 完美居中——著名的用例

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

这三行将子元素同时水平和垂直居中——这是 Flexbox 之前极其困难的任务。

## 常见模式

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` 的选项包括 `flex-start`、`center`、`flex-end`、`space-between`、`space-around`、`space-evenly`。

## 为什么这很重要

Flexbox 是导航栏、按钮组、卡片行、居中和任何