弹性布局

一、网格布局

图一

从左往右的方格，默认是不换行的，flex-warp:no-warp(默认)，如果现在想让一行出现四个，那么项目本身的宽度是25%，flex:0 0 25%,第三个属性就是本身项目的大小，其实相当于设置宽度。width：25%一样的。

图二

比如三个我设置宽度为33.3%，其实不用，flex-grow:1剩余空间均等分，如果都给1，说明全部平分。grow=1的作用还有很多，比如我header和footer是固定高度，那么中间的部分就是flex-grow:1,就是把剩余的空间全部占满，也就是通常说的，左边是固定宽度，右边自适应，flex:1是一个道理，flex:1就是grow:1，就是把剩下的空间全部占满了。

二、面试常问布局

图三

面试会问左侧是固定宽度，右侧怎么自适应，要么就用calc计算，要么就是弹性布局，给右边一个属性就好，就是把剩余的空间占满-----flex:1

总结：总之我觉得最有用的，除了水平居中，垂直居中之外，flex:1,非常有用，如果只剩下自己加上这个属性，那么就是占满剩下的空间，如果是很多兄弟都加上这个属性，那么就是占的分数，如果都是1，那么平分，如果又一个是2，那么他比其他的宽一倍。至于align-items:center,justify-content:center这个应该都会使用的。本文就不说明了。