一、网格布局
图一
从左往右的方格，默认是不换行的，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
