front-end-example/02-css-layout/03-flex-layout

练习 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)