FlexBox弹性盒属性

一、flex的容器与项目

flex容器：采用flex布局的元素的父元素

flex项目：采用flex布局的元素的父元素的子元素

二、flex容器属性

1、display：flex、inline-flex （将对象作为内联款及弹性伸缩盒显示）

注意：设为flex布局后，子元素的float、clear和vertical-align属性将失效。

2、flex-direction属性：决定主轴的方向（即项目的排列方向）

flex-direction属性：row（默认 从左到右）、row-reverse（从右到左）、column（垂直向下）、column-reverse（垂直向上）

3、flex-wrap属性：定义子元素是否换行显示

flex-wrap：nowrap（所有元素都在一行）、wrap（元素自动换成多行）、wrap-reverse（元素自动换成逆序的多行）

4、flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；

5、justify-content属性：定义了项目在主轴（）上的对齐方式。

justify-content：flex-start、flex-end、center、space-between（元素之间保持相等距离）、space-around（每行的周围都保持相等距离）

6、align-items属性：定义了项目侧轴（单行）上如何对齐。

align-items：flex-start、flex-end、center、baseline（基线对齐 所有文字在同一水平）、stretch（默认值 若父元素没设置高度，子元素会拉伸占满）

7、align-content属性：定义了多根轴线的对齐方式。

align-content：flex-start、flex-end、center、space-between

（行与行之间保持相等距离）、space-around（每行的周围保持相等距离）、stretch（每一行都被拉伸以填满容器）；

        align-center在侧轴上执行样式时，会把默认的间距给合并。对于单行子元素，该属性不起作用。

三、flex项目属性

1、align-self属性

IE和safari浏览器不支持align-self属性

说明：align-self属性规定灵活容器内被选中项目的对齐方式。

注意：align-self属性可重写灵活容器内的align-items属性

属性值：auto默认值。元素继承了它的父容器的align-items属性，如果没有父容器则为“stretch”；

               stretch 元素被拉伸以适应容器

               center  元素位于容器的中心

               flex-start 元素位于容器的开头

               flex-end 元素位于容器的结尾

2、order

说明：number排序优先级，以元素原位为起点数字越大越往后排，往前移动则写负数，默认为0。

3、flex

说明：复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

详细属性值：

缩写「flex：1」，则其计算值为「1 1 0%」；

缩写「flex：auto」，则其计算值为「1 1 auto」

「flex：none」，则其计算值为「0 0 auto」；

「flex：0 auto」或者「flex：initial」，则其计算值为「0 1 auto」，即「flex」初始值

4、flex-xxx

flex-grow 一个数字，规定项目将对于其他灵活的项目进行扩展的量。

flex-shrink 一个数字，规定项目将对于其他灵活的项目进行收缩的量。

flex-basis 项目的长度