Flexbox（弹性盒子）和Grid Layout（网格）的区别-css教程-PHP中文网

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

心靈之曲

发布： 2024-10-08 08:03:44

转载

794人浏览过

flexbox（弹性盒子）和grid layout（网格）的区别

1. 一维与二维布局

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

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


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

登录后复制

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

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


<p>.container {<br>
    display: grid;<br>
    grid-template-columns: repeat(3, 1fr);<br>
    grid-template-rows: auto;<br>
  }</p>

登录后复制

用例

flexbox:
- 最适合一个方向（行或列）的布局，其主要目标是在项目之间分配空间或对齐容器内的项目。
- 常见用例：
- 导航栏。
- 将项目垂直或水平居中。
- 简单的组件，如按钮、菜单或工具栏。
网格:
- 最适合复杂布局，您需要定义行和列并将项目放置在结构化网格中。
- 常见用例：
- 完整的网页布局。
- 带有标题、侧边栏和内容区域的布局。
- 当您需要对行和列进行细粒度控制时。

3. 对齐控制

flexbox:
- flexbox 可以轻松控制项目沿主轴和横轴的对齐方式。
- 使用 justify-content（对于主轴）和align-items（对于横轴）等属性对齐项目。
网格:
- 网格提供精确控制使用行线和列线（网格线）放置项目的位置。
- 网格还提供 justify-content 和align-content，但可以更好地控制项目跨网格区域的方式。

4. 物品放置

flexbox:
- 根据容器中的可用空间顺序放置项目（下一个项目位于行或列中的前一个项目之后）。
- 您无法同时控制两个轴上项目的放置。
网格:
- 网格允许您通过指定每个项目应占据的行和列来显式定位项目。
- 您可以通过参考网格线将项目放置在网格上的任何位置。


<p>.item1 {<br>
    grid-column: 1 / 3;  /* span two columns <em>/</em><br>
    grid-row: 1 / 2;     / span one row */<br>
  }</p>

登录后复制

布局的复杂性

flexbox:
- 非常适合简单布局，例如项目的行或列，对齐一些元素。
- 在构建复杂的页面布局方面受到更多限制。
网格:
- 非常适合涉及多行和列、重叠元素和复杂网格结构的复杂布局。
- 网格可以处理项目的对齐和定位，非常适合创建整个页面布局。

6. 内容与布局优先方法

flexbox:
- 内容优先的方法：当您围绕内容大小设计布局时，flexbox 效果最佳。布局适应其子项的大小（例如弹性项目）。
- 项目的大小和位置更多地取决于其中的内容。
网格:
- 布局优先方法：网格专注于首先定义页面上的区域（行、列），然后将内容放置在定义的结构中。
- 首先设置网格模板结构，然后将内容放入其中。

7. 浏览器支持

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

8. 嵌套布局

flexbox:
- flexbox 在网格内用于嵌套布局时非常有用，例如当您需要在网格项内使用基于行或列的布局时。
网格:
- 网格还可以处理嵌套布局，尽管它更常用于较大规模的结构，例如页面的主布局，而 flexbox 经常在网格项内使用。

示例：比较 flexbox 与网格布局

弹性盒示例：


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

登录后复制


<p>.flex-container {<br>
  display: flex;<br>
  flex-direction: row;<br>
  justify-content: space-between;<br>
}</p>

<p>.item {<br>
  width: 100px;<br>
  height: 100px;<br>
  background-color: lightblue;<br>
}</p>

登录后复制

网格示例：


<p><div class="grid-container"><br>
  <div class="item">1</div><br>
  <div class="item">2</div><br>
  <div class="item">3</div><br>
</div></p>

登录后复制


<p>.grid-container {<br>
  display: grid;<br>
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */<br>
  gap: 10px;<br>
}</p>

<p>.item {<br>
  background-color: lightblue;<br>
  height: 100px;<br>
}</p>

登录后复制