弹性盒模型的基本用法

1、弹性盒模型
（1）display:flex
说明：设置为弹性盒（父元素添加）
（2）flex-direction (主轴排列方向)
说明：顺序指定了弹性子元素在父容器中的位置
　　　1.row 默认在一行内排列
2.row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
3.column：纵向排列。
4.column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
（3）justify-content(主轴对齐方式)
说明：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
1.flex-start默认，顶端对齐
2. flex-end末端对齐
3. center居中对齐
4.space-between两端对齐，中间自动分配
5.space-around自动分配距离
（4）align-items（侧轴对齐方式）
说明：侧轴对齐方式
1.flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
2.flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
3.center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
4.baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

（5）flex-wrap
说明：该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
1.nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
2.wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
3.wrap-reverse：反转 wrap 排列。
（6）align-content（行与行之间对齐方式）
说明：当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <’ justify-content’> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
1. flex-start没有行间距
2. flex-end底对齐没有行间距
3. center居中没有行间距
4. space-between两端对齐，中间自动分配
5.space-around自动分配距离
（7）align-self
说明：align-self 属性规定灵活容器内被选中项目的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。
1.auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则 为 “stretch”。
1.Stretch 元素被拉伸以适应容器。
2.Center 元素位于容器的中心。
3.flex-start 元素位于容器的开头。
3.flex-end 元素位于容器的结尾。
4.baseline
（8）Order
说明：number排序优先级，数字越大越往后排，默认为0，支持负数。
（9）Flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
1）flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

2）flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

3）flex-basis定义项目占据的主轴空间。(如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效。)