flex弹性布局（九）

1 . 弹性布局：又称为flex布局，是css3.0新增的布局方式

弹性布局，用来给盒模型提供最大的灵活性

任何一个容器，都可以被设置弹性布局

采用弹性布局的标签，父元素被称为flex容器，简称为“容器”；它的所有子元素自动成为容器成员，子元素称为flex项目，简称为“项目”

2 . flex布局的属性：容器属性和项目属性

容器默认存在两根轴线：水平方向的主轴和垂直方向的交叉轴

3 . display: flex;  定义弹性布局

flex布局，会影响子元素的布局方式。

flex布局中的元素，子元素不在参与原有的流式布局，而是参与弹性布局。

flex中，无论是行元素还是块元素，都是按照flex的方向排列。

 4 . flex-direction ：设置弹性布局中项目的排列方向

属性	属性值	描述
flex-direction	row	默认值，项目从左到右主轴排列，起点在左端
	row-reverse	项目从右往左排列，起点在右端
	column	项目从上往下交叉排列，起点在顶端
	column-reverse	项目从下往上交叉排列，起点下端

5 . justify-content : 项目在主轴的对齐方式

属性	属性值	描述
justify-content	flex-start	所有的项目在起始线对齐
	flex-end	所有的项目在终止线对齐
	center	所有项目在中间线对齐：居中
	space-around	项目两端间距相等，项目之间的间距相等，是项目到两端的2倍
	space-between	项目两端对齐，项目之间的间距相等
	space-evenly	项目之间的间距与项目到两端的间距相等

6. align-items : 定义当行项目交叉轴如何对齐

属性	属性值	描述
align-items	center	项目在交叉轴的中点对齐
	flex-start	项目在交叉轴的起点对齐
	flex-end	项目在交叉轴的终点对齐

7 . flex-wrap : 定义项目在主轴一行排列不下时如何换行

属性	属性值	描述
flex-wrap	nowrap	默认值，不换行
	wrap	换行显示，第一行在上方
	wrap-reverse	换行显示，第一行在下面

8 . align-content : 定义多根轴线在交叉轴如何对齐。如果项目只有一根轴线，则该属性不起作用

属性	属性值	描述
align-content	center	多根轴线在交叉轴的中点对齐
	flex-start	多根轴线在交叉轴的起点对齐
	flex-end	多根轴线在交叉轴的终点对齐
	space-around	轴线两端间距相等，轴线之间的间距相等，是轴线两端的2倍
	space-between	多条轴线两端对齐，轴线之间间距相等
	space-evenly	轴系两端的间距与轴线之间间距相等