弹性盒布局-----指定水平方向与垂直方向上的对齐方式

首先介绍弹性盒布局中的一些术语的意思

main-axis：进行布局时作为布局基准的轴，在横向布局时为水平轴，在纵向布局时为垂直轴

main-start/main-end：进行布局时的起点和终点。在横向布局时为容器的左端和右端，在纵向布局时为容器的顶端和底端。

cross-axis：与main-axis垂直相交的轴，在横向布局时为垂直轴，在纵向布局时为水平轴。

cross-start/cross-end：cross-axis的起点和终点。在横向布局时为容器的顶端和底端，在纵向布局时为容器的左端和右端。

将flex-wrap属性值指定为wrap且进行横向多行布局时，按从cross-start到cross-end方向，即从上往下布局。

将flex-wrap属性值指定为wrap-reverse且进行横向多行布局时，按从cross-end到cross-start方向，即从下往上布局。

justify-content属性(针对main-axis轴）

1、指定如何布局容器中除了子元素之外的main-axis轴（横向布局时，main-axis轴方向为水平方向，纵向布局时main-axis轴方向为垂直方向）方向上的剩余空白部分。

2、当flex-grow属性值不为0时，各子元素在main-axis轴方向自动填满容器，所以justify-content属性值无效

justify-content属性值如下：

flex-start：从main-start开始布局所有子元素（默认值）

flex-start：从main-end开始布局所有子元素

center：居中布局所有子元素

space-between：将第一个元素布局在main-start处，将最后一个元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间

 space-around：将空白部分平均分配在以下几处，如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间

justify-content的不同属性值所产生的不同效果如下：

	
	
	


	

		
示例文字A
		
示例文字B
		
示例文字C
	

1、属性值为flex-start

2、属性值为flex-end

3、属性值为center

4、属性值为space-between

5、属性值为space-around

align-items属性(针对cross-axis轴）

指定如何布局容器中除了子元素之外的cross-axis轴（横向布局时，cross-axis轴方向为水平方向，纵向布局时cross-axis轴方向为垂直方向）方向上的剩余空白部分。

align-items属性值如下：

flex-start：从cross-start开始布局所有子元素（默认值）

flex-start：从cross-end开始布局所有子元素

center：居中布局所有子元素

space-between：

如果子元素的布局方向与容器的布局方向不一致，则该值的作用等效于flex-start属性值的作用
如果子元素的布局方向与容器的布局方向保持一致，则所有子元素的内容沿基线对齐

 space-around：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度