Flex Box是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
    弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex或inline-flex（行内元素设置为Flex布局）将其定义为弹性容器。
    注：设为了Flex布局以后，子元素的float、clear和virtical-align属性将失效。
    弹性容器内包含一个或多个弹性子元素。
    注意：弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性元素的如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行。
    修改排列方式：rtl(right to left)
    body { direction: rtl; }
    弹性容器上的属性共有6个：
    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content
    ①flex-direcion：决定了主轴的方向（即弹性子元素在父容器中的排列方向）。
    语法：flex-direction: row | row-reverse | column | column-reverse
    row：横向从左到右排列。默认的排列方式。
    row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）
    column：纵向排列。
    column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
    ②flex-wrap：默认情况下，项目都排在一条线上，该属性定义如果一条轴线排不下，如何换行。
    语法：flex-wrap: nowrap | wrap | wrap-reverse
    ③flex-flow：该属性是flex-direction属性和flex-wrap属性的简写形式，默认值是row nowrap。
    ④justify-content：定义了项目在主轴上的对齐方式，把弹性项沿着弹性容器的主轴线对齐。
    语法：justify-content: flex-start | flex-end | center | space-between | space-around
    flex-start：左对齐
    flex-end：右对齐
    center：居中
    space-between：两端对齐，项目之间的间隔都是相等的
    space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。
    ⑤align-items：定义项目在交叉轴上如何对齐。
    语法：align-items: flex-start | flex-end | center | baseline | strench
    baseline：项目的第一行文字的基线对齐
    strench（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
    ⑥align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
    语法：align-content: flex-start | flex-end | center | space-between | space-around | strench(默认值)
    弹性子元素上的6个属性：
    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self
    ①order :定义弹性子元素的排列顺序。数值越小，排列越靠前，默认为0。
    语法：order: <integer>
    ②flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
    语法：flex-grow: <number>
    ③flex-shrink:定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。
    语法：flex-shrink: <number>
    ④flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto
    ⑤flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值是 0 1 auto。建议优先使用这个属性。该属性有两个快捷值： auto(1 1 auto) 和none(0 0 auto)。
    ⑥align-self：允许单个弹性子元素有与其他子元素不一样的对齐方式。可覆盖align-items属性，默认值为auto，表示继承弹性容器的align-items属性，如果没有父元素，则等同于strench。