练习flex布局中的思考

总结一下

布局时候，我们使用的标签，都是容器

• 父容器（.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书写文章的软件，重点就偏移到大屏了，而不是移动端。