flex box:作用:
    1.按照你想要的方式布局
    2.更高效
属性:
display: flex | inline-flex :作用于父级元素

flex-direction 主轴方向:
flex-direction: row | row-reverse | column | column-reverse
• row(默认):主轴为水平方向,从左到右
• row-reverse：主轴为水平方向.从右到左
• column：主轴为垂直方向,从上到下
• column-reverse：主轴为垂直方向,从下到上

flex-wrap :伸缩盒对象的子元素超出父容器时是否换行
flex-wrap: nowrap | wrap | wrap-reverse
• nowrap：当子元素溢出父容器时不换行。
• wrap：当子元素溢出父容器时自动换行。
• wrap-reverse：反转 wrap 排列,(下一行位置与交叉轴位 置相反)

flex-flow  (适用于父类容器上) :
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
• [ flex-direction ]：定义弹性盒子元素的排列方向。
• [ flex-wrap ]：定义弹性盒子元素溢出父容器时是否换行。

justify-content :确定在主轴方向上的对齐方式
justify-content: flex-start | flex-end | center | space-b etween | space-around
• flex-start：该行起始位置
• flex-end：该行结束位置
• center：该行中央,空间不足,则超出空间
• space-between：平均地分布在行里
• space-around：平均地分布在行里，两端保留子元素与 子元素之间间距大小的一半。

align-items : 确定在交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretc h
• flex-start：交叉轴的起始位置
• flex-end：交叉轴的结束位置
• center：在交叉轴居中
• baseline：在基准线上保持对齐
• stretch：如果条目的交叉轴尺寸的计算值是“auto”，则其实 际使用的值会使得盒子在交叉轴方向上尽可能地占满

align-self :
• 属性"align-self"的可选值除了align-items列出的之外， 还可以设置为"auto"。当"align-self"的值为 auto 时，其 计算值是父节点的属性"align-items"的值。如果该节点没 有父节点，则计算值为"stretch"。
• 用来覆写容器指定的对齐方式

align-content  :对多行起作用,对单行不起作用
align-content: flex-start | flex-end | center | space-be tween | space-around | stretch
• flex-start：行集中于容器的交叉轴起始位置
• flex-end:行集中于容器的交叉轴结束位置
• center：行集中于容器的中央
• space-between：行在容器中均匀分布。
• space-around：行在容器中均匀分布，两端保留子元素 与子元素之间间距大小的一半。
• stretch：伸展行来占满剩余的空间。多余的空间在行之间 平均分配，使得每一行的交叉轴尺寸变大。

order  (适用于弹性盒模型容器子元素)
• 用整数值来定义排列顺序，数值小的排在前面。可以为负值。
• 默认值为 0

flex-grow  (适用于弹性盒模型容器子元素)  当子元素在父元素盒内有剩余空间起作用  默认为0 (扩展比例)
• 设置或检索弹性盒的扩展比率。
• 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
• flex-grow: <number> (default 0)
• <number>：用数值来定义扩展比率。不允许负值。
• flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。

flex-shrink  (适用于弹性盒模型容器子元素)  当子元素超出父元素时起作用 默认为1 (收缩比例)
• 设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置 的收缩因子作为比率来收缩空间。）
• flex-shrink: <number> (default 1)。
• 演示：flex-shrink
• 说明：
• flex-shrink的默认值为1，如果没有显示定义该属性，将 会自动按照默认值1在所有因子相加之后计算比率来进行 空间收缩。

当扩展容器或收缩容器时以flex-basis的值为基准 默认值是auto
===============================================================================================

flex  (适用于弹性盒模型子元素)
• 复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
• 如果缩写flex:1, 则其计算值为：1 1 0%
• flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
• none：none关键字的计算值为: 0 0 auto
• [ flex-grow ]：定义弹性盒子元素的扩展比率。
• [ flex-shrink ]：定义弹性盒子元素的收缩比率。
• [ flex-basis ]：定义弹性盒子元素的默认基准值。

如果有内容,不能收缩到小于自身内容的宽度
收缩比例:
每个子元素算上收缩比例的基准值/所有子元素算上收缩比例的基准值=收缩的内容/溢出的内容