弹性盒布局

弹性盒布局是基于主轴（x轴）和交叉轴（y轴）进行排列。

• 父标签属性

开启弹性盒布局

display:flex;

注意：开启弹性盒布局后，默认所有子标签一行排列，且不会超出父标签内容，子标签的宽度会进行挤压在同一行里。

• 设置子标签的排列方向

属性：flex-direction

    属性值：row - 从左向右
            row-reverse - 从右向左
            column - 从上到下
            column-reverse - 从下向上

• 设置子标签换行

属性：flex-wrap

    属性值：norwrap - 不换行
            wrap - 换行

• flex-flow属性

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

• 子标签在主轴（X轴）的对齐方式

属性：justify-content
    属性值：flex-start - 在主轴的开始方向
            flex-end - 在主轴的结束方向
            center - 居中
            space-around - 环绕对齐
            space-between - 两端对齐
            space-evenly - 等距离对齐

• 子标签在交叉轴（Y轴）的对齐方式

属性:align-items
    属性值：stretch - 拉伸，当子标签没有设置宽度高度时才起作用，将子标签设置为在容器内的宽高（默认值）
        flex-start - 紧贴交叉轴的起始位置
        flex-end - 紧贴交叉轴的结束位置
        center - 居中

• 多行在容器内的对齐方式

属性：align-content
    属性值：flex-start - 多行都放在主轴顶端
            flex-end - 紧贴在容器的最低端
            center - 多行在容器内居中
            space-around - 多行在容器的主轴方向上环绕对齐
            space-betweeen - 多行在容器的交叉轴方向上两端对齐
            space-evenly - 多行在容器内等距离对齐

• flex作用于单个子元素

Internet Explorer 和 Safari 浏览器不支持 align-self 属性
说明：
    align-self 属性规定灵活容器内被选中项目的对齐方式。
    注意：align-self 属性可重写灵活容器的 align-items 属性。
    属性值
        auto        默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
        Stretch     元素被拉伸以适应容器。
        Center      元素位于容器的中心。
        flex-start      元素位于容器的开头。
        flex-end        元素位于容器的结尾。

子标签占据剩余所有距离

• flex：1；

flex：1 是felx-shrink.flex-grow,flex-basis的复合写法

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
	详细属性值：
		缩写「flex: 1」, 则其计算值为「1 1 0%」
		缩写「flex: auto」, 则其计算值为「1 1 auto」
		flex: none」, 则其计算值为「0 0 auto」
		flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

	flex-grow
		一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
	flex-shrink
		一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
	flex-basis
		项目的长度