8-4 弹性盒式布局2
本节接着上一节内容，由于文字讲解比较清楚，就不罗列出所有代码了，读者可在源代码中自行查阅
flex布局横向的空白
flex布局纵向的空白
flex-direction: column;
flex布局横向使用flex-grow
这是第1列
这是第2列
这是第3列,宽度6em,前面1和2的flex-grow都为1，则原有的空白被1和2列均分
flex布局纵向使用flex-grow
这是第1行
这是第2行
这是第3行,前面1和2的flex-grow都为1,第3行的flex-grow为2，则这三行按1:1:2的高平分原有空白，再加上自身高度
flex布局横向使用flex-shrink
这是第1列
这是第2列
这是第3列,每列宽度50%,三个超过总宽度，则按照flex-shrink的规则，需要裁掉的宽度按1:1:2的比例从三个中抽取
flex布局纵向使用flex-shrink
这是第1行
这是第2行
这是第3行,每行高度10rem,三个超过总高度，则按照flex-shrink的规则，需要裁掉的高度按2:1:1的比例从三个中抽取
flex布局使用换行flex-wrap: wrap;
flex布局使用反向换行flex-wrap: wrap-reverse;