css--弹性布局

什么是Flex ：Flex 是 Flexible Box 的缩写，意为"弹性布局"，可以轻松的控制元素排列、对齐和顺序的控制。
现在的终端类型非常多，使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。

浏览器兼容性：参考网站 https://caniuse.com/ 针对绝大多数尤其是移动设备都可以很好的支持flex

弹性盒子

声明定义

display:flex； 
display:inline-flex；
容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。

属性：flex-direction
用于控制盒子元素排列的方向，并且决定主轴的方向。

row     从左到右水平排列元素     主轴为水平轴
  row-reverse 从右向左排列元素    
  column 从上到下垂直排列元素        主轴为垂直轴
  column-reverse 从下到上锤子排列元素

属性：flex-wrap
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

nowrap 元素不拆行或者不拆列(selected)
wrap 容器元素在必要的时候进行拆行或者拆列
wrap-reverse 容器元素在必要的时候拆行或者拆列，但是以相反的顺序排列

属性：flex-flow
flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。

flex-flow: flex-direction flex-wrap

轴说明
主轴与交叉轴，默认主轴是横向的轴，交叉轴是垂直的轴，在一个二位平面里，轴是垂直的。
doc.houdunren.com 的轴说明最后一个示例图有误。

属性：justify-content
用于控制元素在主轴上的排列方式。

flex-start: 元素紧靠主轴起点
flex-end:   元素紧靠主轴终点
center:     元素从弹性容器中心开始
space-between: 第一个元素靠起点，最后一个元素靠终点，剩下元素平分空间
space-around: 每个元素两侧的间隔相等。 导致元素之间间隔比元素到容器边缘的间隔大一倍
space-evenly: 元素间距平均分配

交叉轴行
元素在交叉轴上有行的概念

• align-item 是控制元素在行上的排列
• align-content 是控制行在交叉轴上的排列

align-item

stretch: 元素被拉伸以适应容器(selceted)
center： 元素位于容器的中心
flex-start: 元素位于容器的交叉轴开头
flex-end: 元素位于容器的交叉轴结尾

stretch：如果设置了width | height | min/max-width/height 等属性，将影响stretch的结果，因为stretch优先级不如前几项高

align-content

stretch: 元素被拉伸以适应容器(selceted)
center： 元素位于容器的中心
flex-start: 元素位于容器的交叉轴开头
flex-end: 元素位于容器的交叉轴结尾
space-between: 第一个元素靠起点，最后一个元素靠终点，剩下元素平分空间
space-around: 每个元素两侧的间隔相等。 导致元素之间间隔比元素到容器边缘的间隔大一倍
space-evenly: 元素间距平均分配

弹性元素

放在容器盒子中的元素即为容器元素。

• 不能使用float 和 clear 规则
• 弹性元素均为块元素
• 绝对定位的弹性元素不参与弹性布局

align-self
用于控制单个元素在交叉轴上的排列方式，相比align-item 控制所有元素，align-slef控制单个元素，并且这个属性应该被添加到元素上，而align-item应该添加到容器上。

stretch: 元素被拉伸以适应容器(selceted)
center： 元素位于容器的中心
flex-start: 元素位于容器的交叉轴开头
flex-end: 元素位于容器的交叉轴结尾

flex-grow
用于将弹性盒子的可用空间，分配给弹性元素。
计算公式 (宽度/总份数)*该元素份数

举例： 下例的三个div元素flex-grow 设置为 1，2，3
    则第三个元素所占空间为     width = (宽度/1+2+3)*3

如果弹性元素设置了宽度，将把(弹性盒子宽度-弹性元素已设置宽度)作为新的宽度再计算

flex-shrink
与flex-grow相反，flex-shrink是在弹性盒子装不下元素时候定义的缩小值。

计算公式：

缩小比例 = 不足的空间 / (sum(元素宽度*缩小比例)
最终尺寸 = 元素宽度 - (flex-shrink系数 * 元素原本宽度)*缩小比例

flex-basis
flex-basis属性定义了在分配多余空间或者根据不足空间缩小之前，所有元素占据的主轴空间，浏览器根据这个属性来计算，是否需要grow or shrink。
优先级高于width 和 height。

flex
flex: flex-grow flex-shrink flex-basis

order
用于控制弹性元素的位置，默认为 order：0 数值越小越在前面，可以负数or整数。

弹性文本

文本节点也在弹性布局的操作范围内，被视作块级元素。

绝对定位
绝对定位的弹性元素不参与弹性布局

自动空间
在弹性布局中队元素使用后margin-right:auto等形式课有自动撑满空间。