Flex布局与Grid布局的对比？

Flex布局与Grid布局的对比

1. 核心概念

• Flex布局：一维布局模型，用于处理行或列方向的布局。

• Grid布局：二维布局模型，可同时处理行和列方向的布局。

2. 主要用途

• Flex布局：适合组件内部排列（如导航栏、卡片内容）。

• Grid布局：适合整体页面结构（如网格系统、复杂布局）。

3. 示例与用法

Flex布局示例

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-between; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
}
.item {
  width: 100px;
  height: 100px;
  background: lightblue;
}

• 关键属性：

• flex-direction：控制主轴方向（row/column）。

• flex-wrap：是否换行。

• justify-content：主轴对齐方式。

• align-items：交叉轴对齐方式。

Grid布局示例

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 两列：固定宽度 + 自适应 */
  grid-template-rows: 80px auto; /* 两行：固定高度 + 自适应 */
  gap: 10px; /* 间距 */
}
.header {
  grid-column: 1 / 3; /* 跨两列 */
  background: lightcoral;
}
.sidebar { background: lightgreen; }
.main { background: lightblue; }

• 关键属性：

• grid-template-columns/rows：定义网格轨道。

• grid-column/row：控制项目位置。

• gap：网格间距。

4. 对比总结

5. 选择建议

• 使用 Flex：当布局方向单一（如水平菜单、垂直列表）。

• 使用 Grid：当需要同时控制行列（如仪表盘、杂志式布局）。