flex布局

1. flex-direction 属性：
flex-direction 属性规定灵活项目的方向；如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。
取值：
row(从左往右)  /  row-reverse(从右往左)  / 
| 
column（从上到下）  /  column-reverse （从下到上）
    | 

initial (设置该属性为它的默认值) /  inherit (从父元素继承该属性);
2. 弹性容器
(1). justify-content  调整内容：
       控制一行里的弹性元素在主轴上如何分布；应用于弹性容器上，不能用到单个弹性元素上，定义如何把弹性容器的空间分配到弹性元素之间。
取值：
flex-start（默认值，弹性元素靠主轴起边）  /  flex-end  / center / space-between  / space-around /  space-evenly
   
(2).align-items：
       定义各弹性元素在弹性容器的垂轴上的对齐方式；应用于弹性容器上，不能用到单个弹性元素；可以把所有的弹性元素都向垂轴的起边、终边或中线对齐。作用与justify-content类似，不过影响的是垂向。
取值：
flex-start /  flex-end  / center / baseline  / stretch（初始值)  起边/终边/居中/基线对齐

stretch表明，所有的可拉伸的弹性元素将与所在行中最高或最宽的弹性元素一样高或一样宽。可拉伸就是默认情况下，弹性元素将被拉伸，占据整个垂轴尺寸。但是如果为弹性元素设置了垂轴方向上的尺寸，那stretch不起作用。
(3). align-self :
      align-items属性在弹性容器上设置，定义弹性容器中所有弹性元素的对齐方式。但是单个的弹性元素的对齐方式可以使用align-self属性覆盖。
取值：
auto / flex-start /  flex-end  / center / baseline  / stretch
(4).  align-content：
      定义弹性容器在垂轴方向上有额外的空间时如何分配到各弹性元素行之间和 周围，以及空间不足以放下所有弹性元素行时从哪个方向溢出。
       与align-items在取值和相关概念是一样的，但是align-items指定的是每一行中弹性元素的定位方式。
       与justify-content相比，justify-content在弹性容器上的主轴方向上对齐各个弹性元素，而align-content只适用于分为多行显示的弹性容器，对禁止换行和只有一行的弹性容器无影响。
取值：
flex-start /  flex-end  / center / space-between / space-around / space-evenly / stretch(初始值)

3. 弹性元素
       为有子节点的元素声明display：flex或display：inline-flex即可创建弹性容器。弹性容器的子代称为弹性元素，不管是子元素，还是元素之间非空的文本节点，或是生成的内容。
(1). 特性
      弹性元素的外边距不折叠。float和clear属性对弹性元素不起作用，不会把弹性元素移出文档流。在弹性容器内的图像和文本节点作为弹性元素时，虽然二者都是行内节点，但是变成弹性元素后，只要没有绝对定位就是块级。

 

       此时的弹性元素有5个。注释和只有空白的文本节点将被忽略。标题、图像、链接之前按的文本节点、链接、以及链接之后的文本节点都是弹性元素。内容为“some text”“and more  text”的文本节点将放在匿名弹性元素中，在上图以没有背景的虚线框表示。标题、图像、链接是真正的DOM节点，可以直接CSS装饰。匿名弹性元素不能直接选择，因此只能从弹性容器上继承样式。
      verical-align对弹性元素没有影响，只用于设定弹性元素中文本的对齐方式。

 （2）绝对定位

float不会浮动弹性元素，但是position：absolute不一样。如果觉得定位弹性容器的子元素，与绝对定位普通元素一样，将从文档流中移除。绝对定位的弹性元素不再参与弹性布局，以为他们已经不在文档流中。但是这些元素将受应用在弹性容器上的样式影响。绝对定位的弹性元素子元素既受弹性容器的justify-content值影响，也受自身align-sefe的影响。

4. flex属性：
是flex-grow弹性增长因子、flex-shrink弹性缩减因子、flex-basis弹性基准的简写形式，flex-basis弹性基准指明如何应用增长因子和弹性缩减因子。
初始值：0   1   auto
       弹性元素所在的框体尺寸由flex决定，而不是确定主轴尺寸大小的属性(height/width)。flex-basis要素决定着，为了占满可用空间，弹性元素能增长多少，或者在空间不足时，弹性元素要缩减多少才能全部放下。限制尺寸不变可以设置增长和缩减因子都为0。

(1). flex-basis弹性基准：
定义弹性元素的初始或默认尺寸，即根据增长因子和缩减因子分配多余或缺少的空间之前，弹性元素的大小。初始值auto。
(其他两个属性可以自行查找，强烈建议使用简写的flex属性而不是三个单独的属性，所以此处不过多介绍)

5. order属性
用于修改单个弹性元素的显示顺序。适用于弹性元素以及弹性容器中绝对定位的子元素。在页面中绘制弹性元素时，order属性为负数的弹性元素显示在采用默认值0的弹性元素前面，而order属性为正数的弹性元素显示在采用默认值0的弹性元素后面。