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将会失效。)
