总结一下
布局时候，我们使用的标签，都是容器
- 父容器（
.grid） - 子容器（
.grid-cell）
有一个思想，父容器标签，可以使用padding留白，但是如果父容器中有子容器，那么子容器应当抵消掉父容器的留白，以保证内容大小符合预期。
一句话：即，由父容器标签决定内容呈现区域，子容器没有这个权利。
这样的做法，在我们根据设计图实现视图时，会更加方便
同时，如果我们去设计ui也更加方便。
真正的显示内容，要放在子容器中，而不能直接暴露给父容器，以保证正确的可复用的布局
可以在子容器中嵌套一个新的.grid继续对子容器的空间进行布局
具体的属性
父容器属性：
- flex-wrap
多个子容器宽度超了，换不换行 - flex-direction
控制流方向
此属性常用在网站整体的布局，头部，中部，页脚的模式，在不同设备上可能有不同的显示需求。
比如圣杯布局，小屏幕我们需要纵向排布，大屏幕则改为横向。
通过@media，可以很容易实现。
- align-items 和 justify-content
宏观调控item的位置，前者为纵轴对齐方式，后者为横轴对齐方式
通过他们的配合，能构造出很多布局效果。
比如垂直居中
子容器（项目）属性：
- order
优化SEO
我们将最主要的内容标签书写前，通过order控制显示位置
- flex
通常：
flex: 1;放大，自适应位置，宽度
flex: none不放大，自适应位置
flex: 0 0 n%响应式布局——控制项目宽度。类似bootstrap
当然，还有其他的，比如，缩小后，突出某个项目
类似这样的具体到项目的排版布局。
- align-self
兼容性
移动优先
@media( min-width ) ，就是移动端优先，这其实不是什么关键问题，是不是在开发中移动端优先，取决于项目需求。
比如，开发一个markdown书写文章的软件，重点就偏移到大屏了，而不是移动端。
