# 练习 3：Flex 布局

## 目标

学会用 Flex 做横向排列、间距和居中。

## 你要练什么

- `display: flex`
- `justify-content`
- `align-items`
- `gap`
- `flex: 1`

## 任务

请完成一个三列学习面板，要求：

- 3 个卡片横向排列
- 卡片之间有统一间距
- 每个卡片宽度尽量均分
- 标题和按钮排版清晰
- 整个区域居中显示

## 文件

- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/answer.css)