上一章主要介绍了一些css的常用属性 https://www.cnblogs.com/woywan/p/12599827.html
本篇主要介绍一下flex布局
什么是flex布局，即弹性盒布局
弹性盒布局的常用属性
1.display:flex;这句话就意味着，这个盒子要以弹性盒的形式显示，同时也是使用弹性盒必写的一句代码
2.flex-direction:row; 决定盒子的内容排列方式，row代表水平从左到右排列，column代表垂直从上到下排列，至于后面有reverse就是反向排列，从右到左，从下到上
column;
row-reverse;
column-reverse;
3.flex-wrap:no-wrap; 不换行排列
wrap; 换行排列
wrap-reverse; 换行并反向排列
4.justify-content:flex-start; 决定盒子内容的水平排列方式，位于盒子的开头水平排列
center; 决定盒子内容的水平排列方式，位于盒子的中间水平排列
flex-end; 决定盒子内容的水平排列方式，位于盒子的尾部水平排列
space-between; 决定盒子内容的水平排列方式，位于盒子的左右两侧对齐水平排列，比如一个弹性div里有两个div，那么一个靠左排列，一个靠右排列
space-around; 决定盒子内容的水平排列方式，位于盒子的左右两侧留白水平排列
5.align-items:flex-start; 决定盒子内容的垂直排列方式，位于盒子的开头垂直排列
center; 决定盒子内容的垂直排列方式，位于盒子的中间垂直排列
flex-end; 决定盒子内容的垂直排列方式，位于盒子的底部垂直排列
stretch; 默认值
baseline; 决定盒子内容的垂直排列方式，位于盒子的基线垂直排列
6.flex-shrink:数值; 当页面宽度不足时，按比例缩放盒子内容，默认是1，为0时不缩放，这个属性要写在内容的样式上