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>
摘要：
- flexbox：一维（行或列），非常适合简单、灵活的布局以及沿一个轴对齐项目。非常适合小型组件或更简单的布局。
- 网格：二维（行和列），非常适合复杂的大规模布局，可精确控制两个方向的定位。
当布局比较简单并且主要涉及行或列中的元素时，请使用 flexbox。当您需要包含行和列的更复杂、结构化的布局时，请使用 grid。这两种工具是互补的，可以在网页或应用程序的各个部分一起使用。
