Flexbox（弹性盒子）和Grid Layout（网格）的区别

1. 一维与二维布局

• flexbox（灵活框布局）：
  • 一维布局模型。
  • 它旨在管理单轴（水平或垂直）的布局。
  • 项目排列在行（沿主轴）或列（沿横轴）中，并且它们之间/周围的空间是灵活的。

示例：将元素排列在一行（行或列）中。

  .container {
    display: flex;
    flex-direction: row; /* or 'column' */
  }

• 网格布局：
  • 二维布局模型。
  • 它允许同时控制水平（行）和垂直（列）布局。
  • 它更适合需要行和列的复杂布局。

示例：定义一个包含行和列的网格，以适应元素。

.container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: auto;

  }

1. 用例

• flexbox:

  • 最适合一个方向（行或列）的布局，其主要目标是在项目之间分配空间或对齐容器内的项目。
  • 常见用例：
  • 导航栏。
  • 将项目垂直或水平居中。
  • 简单的组件，如按钮、菜单或工具栏。

• 网格:

  • 最适合复杂布局，您需要定义行和列并将项目放置在结构化网格中。
  • 常见用例：
  • 完整的网页布局。
  • 带有标题、侧边栏和内容区域的布局。
  • 当您需要对行和列进行细粒度控制时。

3. 对齐控制

• flexbox:

  • flexbox 可以轻松控制项目沿主轴和横轴的对齐方式。
  • 使用 justify-content（对于主轴）和align-items（对于横轴）等属性对齐项目。

• 网格:

  • 网格提供精确控制使用行线和列线（网格线）放置项目的位置。
  • 网格还提供 justify-content 和align-content，但可以更好地控制项目跨网格区域的方式。

4. 物品放置

• flexbox:

  • 根据容器中的可用空间顺序放置项目（下一个项目位于行或列中的前一个项目之后）。
  • 您无法同时控制两个轴上项目的放置。

• 网格:

  • 网格允许您通过指定每个项目应占据的行和列来显式定位项目。
  • 您可以通过参考网格线将项目放置在网格上的任何位置。

.item1 {

    grid-column: 1 / 3;  /* span two columns /

    grid-row: 1 / 2;     / span one row */

  }

1. 布局的复杂性

• flexbox:

  • 非常适合简单布局，例如项目的行或列，对齐一些元素。
  • 在构建复杂的页面布局方面受到更多限制。

• 网格:

  • 非常适合涉及多行和列、重叠元素和复杂网格结构的复杂布局。
  • 网格可以处理项目的对齐和定位，非常适合创建整个页面布局。

6. 内容与布局优先方法

• flexbox:

  • 内容优先的方法：当您围绕内容大小设计布局时，flexbox 效果最佳。布局适应其子项的大小（例如弹性项目）。
  • 项目的大小和位置更多地取决于其中的内容。

• 网格:

  • 布局优先方法：网格专注于首先定义页面上的区域（行、列），然后将内容放置在定义的结构中。
  • 首先设置网格模板结构，然后将内容放入其中。

7. 浏览器支持

• flexbox 和 grid 在现代浏览器中都有出色的浏览器支持。然而，flexbox 的存在时间更长，并且在旧版本浏览器中拥有更广泛的支持。

8. 嵌套布局

• flexbox:

  • flexbox 在网格内用于嵌套布局时非常有用，例如当您需要在网格项内使用基于行或列的布局时。

• 网格:

  • 网格还可以处理嵌套布局，尽管它更常用于较大规模的结构，例如页面的主布局，而 flexbox 经常在网格项内使用。

示例：比较 flexbox 与网格布局

弹性盒示例：

<div class="flex-container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

</div>

.flex-container {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

.item {

  width: 100px;

  height: 100px;

  background-color: lightblue;

}

网格示例：

<div class="grid-container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

</div>

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */

  gap: 10px;

}

.item {

  background-color: lightblue;

  height: 100px;

}

摘要：

• flexbox：一维（行或列），非常适合简单、灵活的布局以及沿一个轴对齐项目。非常适合小型组件或更简单的布局。
• 网格：二维（行和列），非常适合复杂的大规模布局，可精确控制两个方向的定位。

当布局比较简单并且主要涉及行或列中的元素时，请使用 flexbox。当您需要包含行和列的更复杂、结构化的布局时，请使用 grid。这两种工具是互补的，可以在网页或应用程序的各个部分一起使用。