flex弹性布局

容器属性

1 justify-content - main轴-水平布局

1.1 center

							flex项目水平居中

1.2 flex-end

							flex项目靠右对齐	

1.3 space-between

							flex项目两端对齐

1.4 space-around

			flex项目两端对齐，项目间的距离是两端和容器距离的2倍。

1.5 space-evenly

			flex项目两端对齐，项目间距和容器两端的距离相等。

2 align-items - cross轴-垂直布局

2.1 center

							垂直方向居中

2.2 flex-end

							cross轴底部对齐

2.3 水平、垂直居中

						justify-content: center;
						align-items: center;

2.4 flex-direction - 项目方向

2.5 row-reverses

						flex项目水平方向，反序排列

2.6 column

						flex项目垂直方向，正序排列

2.7 column-revese

						flex项目垂直方向，反序排列

2.8 flex-wrap - 换行、换列

nowrap

默认值。意思是不换行、换列。
当flex项目的总宽度超过容器的宽度，flex项目将按照原有比例强行等分，且不换行。

wrap

换行、换列。当flex项目的总宽度超过容器的宽度，将自然换行、换列。且每一行（列）等分容器。

项目属性

1 order

				项目的排列顺序。数值越小，排列越靠前。

2 align-self

					设置单个flex项目的对齐方式。

2.1 center

								居中

2.2 flex-end

								底端对齐

3 flex-grow

默认值为0。用于决定项目在有剩余空间的情况下是否放大。默认不放大。
注意：即使设置了宽度，如果设置了放大，那么宽度失效。
多个flex项目同时放大，如果数值越大，放大的比例也越大。
多个flex项目根据放大比例，重新分配了剩余空间。

4 flex-shrink

不换行、换列的情况下有效。
设置缩小。默认值为1，默认情况下，会等比例缩小，宽度失效。
设为0，表示不缩小。
数值越大，缩小的比例也越大。