导航

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）,以及适用场景？

作用
- 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
好处
- 在传统的布局方式中:
  - block 布局是把块在垂直方向从上到下依次排列的；
  - inline 布局则是在水平方向来排列。
- flex 弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
适用场景
- 弹性布局适合于移动前端开发，在Android和ios上也完美支持。
更多
- http://www.w3cplus.com/css3/flexbox-basics.html

如何解决 flex 布局 7 个元素使用 space-between 最后一行两边分布的问题？

如果我们每一行显示的个数为 n，那我们可以最后一行子项的后面加上 n-2 个 span 元素，span 元素的宽度和其它子项元素宽度一样，但不用设置高度。

为什么是添加 n-2 个 span 元素呢？

当最后一行只有 1 个子元素时，他会默认靠左，不用处理
当最后一行子元素正好时，我们就不用关心这个问题。

所以要去掉这两种情况，只需要加 n-2 个 span 元素就好

https://codepen.io/JingW/pen/QWVZBXO

⭐️ 第二个子元素的高度是多少

<div class="container">
  <div style="height: 100px"></div>
  <div style="min-height: 10px"></div>
</div>
<style>
  .container {
    display: flex;
  }
  .container > div {
    width: 100px;
  }
</style>

答案：

高度是：100px 当容器为 flex 时，其子元素没有指定高度时，其高度默认为父元素高度。

flex 画骰子

https://codepen.io/JingW/pen/JjamaXP

说说你对 Grid 网格布局的理解？

Grid 布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。

网格布局的优缺点

grid 布局的优点：
1. 固定和灵活的轨道尺寸
2. 可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置。网格还包含一种算法，用于控制未在网格上显示位置的项目的放置。
3. 在需要时添加其他行和列
4. 网格包含对齐功能，以便我们可以控制项目放置到网格区域后的对齐方式，以及整个网格的对齐方式。
5. 可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。然后可以用 z-index 属性控制该分层。
grid 布局的缺点：
- 兼容性不太好

网格布局的应用场景

单元格的栅格矩阵
• 响应式删格（布局）系统（响应式博客，后台管理系统）

Grid vs Flex

Untitled

在上图中，我们可以使用 Grid 来搭建页面的整体结构；而使用 Flex 控制 Grid 中的单个区域，例如顶部导航栏中的具体内容。

Grid 是一种二维布局方式，而 Flex 是一维的。
Grid 重点关注布局, 而 Flex 重点关注内容的流向。
Flex 适用于应用的组件，而 Grid 适用于应用本身的布局。

总的来说，Grid 擅长搭建布局结构，而 Flex 则擅长处理元素的流向。