请解释一下 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 布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。