Flex布局

Flex布局又称弹性布局，它的提出是为了更好实现网页布局，可以简便、完整、响应式地实现各种页面布局。目前，已经得到了所有浏览器上网支持。
一、弹性布局的相关属性
1.设置在父容器上的属性
（1）display:flex----指定该容器为弹性布局
（2）flex-direction----设置主轴布局的排列方式
该属性有四个值：
 row（默认值）：布局排列方向显示为行，为当前文档流水平方向，默认情况下是从左到右。
 row-reverse：布局排列方式显示为行，但方向和row属性值相反，默认情况下为从右到左。
 column：布局排列显示为列，默认情况下是从上到下
 column-reverse：布局排列方式为列。但方向和column属性值相反，默认情况下为从下到上。
（3）flex-wrap----设置容器内元素是否进行换行
该属性有三个值：
 wrap：进行换行处理
 nowrap（默认值）：不换行
 wrap-reverse：宽度不足，进行反向换行
（4）flex-flow---- flex-direction和flex-wrap的复合写法，默认值为 （row nowrap）。
（5）justify-content----设置主轴方向上子项的对齐和分布方式
该属性有六个值：
 flex-start（默认值）：左对齐
 flex-end：右对齐
 center：居中
 space-between:两端对齐，子项之间的间隔都相等
 space-around：每个项目两侧的间隔相等。所以，子项之间的间隔比项目与边框的间隔大一倍。
 space-evenly：每个子项两侧空白间隔完全相等。
（6）align-items----每一行子元素的上下对齐方式
该属性有四个值：
 stretch（默认值）：子项拉伸，如果未设置容器的高度，子项将占满容器的整个高度。
 flex-start：子项对容器顶部对齐。
 center：子项表现为垂直居中。
 flex-end：子项对容器底部对齐。
（7）align-content----可以看成和justify-content是相似且对立的属性（即侧轴的对齐方式），如果所有flex子项只有一行，则align-content属性是没有任何效果的，多行下，有几行就会把容器划分为几部分。
该属性有六个值：
 stretch（默认值）：子项拉伸。
 flex-start：左对齐。
 flex-end：右对齐。
 center：居中。
 space-between:两端对齐，子项之间的间隔都相等。
 space-around：每个项目两侧的间隔相等。所以，子项之间的间隔比项目与边框的间隔大一倍。
 space-evenly：每个子项两侧空白间隔完全相等。
2. 设置在子容器上的属性
（1）order----定义子项的排列顺序。数值越小，排列越靠前，默认为0。
（2）flex-grow----定义子项的扩展（在空隙存在的条件下，扩展才会生效）
该属性有两个值：
 0（默认值）：不扩展。
 1：扩展，会把空白区域全部占满。
【注】子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么就会有空隙，如果比例值总和大于1，那么就没有空隙。
（3）flex-shrink：定义子项的收缩比例
正常默认值为1，并且当空间不足时，都将等比例缩小，0表示不缩小。（收缩大小是同正常收缩值1进行比较，大于1的收缩大些，小于1的收缩小一些。）
（4）flex-basis----定义了在分配剩余空间之前元素的默认大小。默认值为auto。
（5）flex---- 为flex-grow，flex-shrink和flex-basis的复合写法，默认值为0 1 auto。
其中还存在两个快捷写法
 flex:1;（即flex(1 1 0);）
 flex:0;（即flex(0 1 0);）
（6）align-self----表示单独某一个flex子项的垂直对齐方式。
该属性有四个值：
 stretch（默认值）：子项拉伸，如果未设置容器的高度，子项将占满容器的整个高度。
 flex-start：子项对容器顶部对齐。
 center：子项表现为垂直居中。
 flex-end：子项对容器底部对齐。
二、当水平方向是主轴时，默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定；当垂直方向是主轴时，默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。

逆战班 苏小钶