Grid/Flex 布局

以下是关于 Flexbox 和 Grid 布局的核心知识点梳理，涵盖基础概念、核心属性及实际应用场景：

---

一、Flexbox（弹性盒子布局）

1. 基本概念

• 设计目标：为一维布局（横向或纵向）提供灵活的容器，自动分配子元素的间距和对齐。
• 适用场景：导航栏、卡片列表、垂直居中、动态内容排列。

2. 容器（Container）属性

属性名	值示例	作用描述
display	flex / inline-flex	定义容器为 Flex 布局。
flex-direction	row / column	主轴方向（默认 row）。
flex-wrap	nowrap / wrap	子元素是否换行（默认不换行）。
justify-content	flex-start / center	主轴对齐方式（水平方向）。
align-items	stretch / center	交叉轴对齐方式（垂直方向）。
align-content	space-between	多行子元素在交叉轴上的对齐方式（需启用 flex-wrap: wrap）。

3. 子元素（Item）属性

属性名	值示例	作用描述
order	0（默认）	控制子元素的显示顺序（数值越小越靠前）。
flex-grow	1	定义子元素的放大比例（剩余空间分配）。
flex-shrink	1	定义子元素的缩小比例（空间不足时收缩）。
flex-basis	auto / 200px	定义子元素的初始大小（优先级高于 width）。
align-self	auto / center	覆盖容器的 align-items 设置，单独定义子元素的交叉轴对齐方式。

4. 典型代码示例

<div class="flex-container">
  <div