Css
Flexbox 与 Grid 布局
Flexbox 与 Grid 布局
主问题：什么是 Flexbox 布局？Flexbox 与 Grid 布局有何区别？
核心回答
Flexbox（弹性盒子布局）
Flexbox 是一维布局模型，用于在一个方向（行或列）上排列元素，非常适合组件内部布局和内容对齐。
核心概念：
- 容器（Flex Container）：设置
display: flex的元素 - 项目（Flex Items）：容器的直接子元素
- 主轴（Main Axis）：flex 方向的主轴
- 交叉轴（Cross Axis）：垂直于主轴的轴
常用属性：
容器属性：
.container {
display: flex;
flex-direction: row | column; /* 主轴方向 */
justify-content: center | space-between; /* 主轴对齐 */
align-items: center | stretch; /* 交叉轴对齐 */
flex-wrap: nowrap | wrap; /* 是否换行 */
gap: 10px; /* 项目间距 */
}项目属性：
.item {
flex: 1; /* 弹性比例 */
flex-grow: 1; /* 放大比例 */
flex-shrink: 1; /* 缩小比例 */
flex-basis: 0; /* 基础大小 */
align-self: center; /* 单独对齐 */
}Grid（网格布局）
Grid 是二维布局模型，可以同时处理行和列，非常适合整体页面布局。
核心概念：
- 网格容器（Grid Container）：设置
display: grid的元素 - 网格项（Grid Items）：容器的直接子元素
- 网格线（Grid Lines）：划分网格的线
- 网格轨道（Grid Track）：两条网格线之间的空间
常用属性：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 列定义 */
grid-template-rows: auto 1fr auto; /* 行定义 */
gap: 20px; /* 间距 */
grid-template-areas: /* 区域命名 */
"header header header"
"sidebar main main"
"footer footer footer";
}
.item {
grid-column: 1 / 3; /* 列范围 */
grid-row: 1 / 2; /* 行范围 */
grid-area: header; /* 区域名称 */
}Flexbox vs Grid 的区别
| 特性 | Flexbox | Grid |
|---|---|---|
| 维度 | 一维（行或列） | 二维（行和列） |
| 适用场景 | 组件内部布局、导航栏、表单 | 整体页面布局、复杂网格 |
| 对齐方式 | 单方向对齐 | 双向对齐 |
| 浏览器支持 | 广泛支持 | 现代浏览器（IE11+） |
| 学习曲线 | 相对简单 | 相对复杂 |
选择建议：
- 使用 Flexbox：导航栏、卡片内部、表单布局、一维排列
- 使用 Grid：整体页面布局、复杂网格、需要精确控制行列
延伸追问
1. 如何实现垂直居中？
回答：多种方法：
方法1：Flexbox（推荐）
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}方法2：Grid
.container {
display: grid;
place-items: center; /* 水平和垂直居中 */
}方法3：绝对定位
.container {
position: relative;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}2. flex: 1 的含义是什么？
回答：flex: 1 是以下三个属性的简写：
flex: 1;
/* 等价于 */
flex-grow: 1; /* 可以放大 */
flex-shrink: 1; /* 可以缩小 */
flex-basis: 0; /* 基础大小为 0 */作用：让元素平均分配剩余空间，常用于实现等宽布局。
3. Grid 中的 fr 单位是什么？
回答：fr（fraction）是 Grid 专用的单位，表示可用空间的比例。
grid-template-columns: 1fr 2fr 1fr;
/* 表示三列，比例为 1:2:1 */优势：自动计算，无需手动计算百分比，响应式友好。
4. 如何实现响应式 Grid 布局？
回答：使用 repeat() 和 auto-fit/auto-fill：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}说明：
auto-fit：自动填充，项目数量少时拉伸auto-fill：自动填充，保持最小宽度minmax(250px, 1fr)：最小 250px，最大平均分配
5. Flexbox 中 justify-content 和 align-items 的区别？
回答：
- justify-content：控制主轴方向的对齐（默认是水平方向）
- align-items：控制交叉轴方向的对齐（默认是垂直方向）
示例：
.container {
flex-direction: row; /* 主轴水平 */
justify-content: space-between; /* 水平分布 */
align-items: center; /* 垂直居中 */
}（注：文档部分内容可能由 AI 生成）