一辨图、網格布局
圖一
從左往右的方格，默認是不換行的肢藐，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
