flex 布局

弹性容器属性

1.flex-direction：

设置容器主轴的方向，可以是X轴，也可以是Y轴；

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

2.justify-content：

设置元素在弹性容器 主轴方向 上的对齐方式

3.align-items

设置元素在弹性容器上 侧轴方向 上的对齐方式

4.flex-wrap

指定弹性容器是不是换行

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。简单来说就是弹性容器只有一行
• wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
• wrap-reverse -反转 wrap 排列。例如本来是支持 溢出来的元素 换行到下面的新行，如果设置为 reverse 则默认从下往上开始排列。

5.align-content

设置每一行对齐的方式 只有当 flex-wrap 为 wrap时生效

• stretch - 默认。各行将会伸展以占用剩余的空间。
• flex-start - 各行向弹性盒容器的起始位置堆叠。
• flex-end - 各行向弹性盒容器的结束位置堆叠。
• center -各行向弹性盒容器的中间位置堆叠。
• space-between -各行在弹性盒容器中平均分布。
• space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

 弹性容器子元素属性：

1.align-self

设置 flex 容器内子元素 在侧轴上的对齐方式

• auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

2.order

设置子元素排列的顺序，小的排在前面

3.flex

 用于指定弹性子元素如何分配空间 各个元素所占的比例。