flex的缩写

  flex: 分配弹性盒容器的剩余空间(份数)
        flex其实三个属性的属性的缩写

        这三个属性默认值为  0%   0   1
                    flex-basis: 基准值
                         参与计算的最终值                          
                         auto 自动（ 即项目的宽度（主轴占位））
                         如果，宽度和 flex-basis同时存在，以flex-basis占位为准
                         参与计算：项目的最终占位，剩余空间的计算，增长和收缩的计算


                    flex-grow: 增长比率
                                默认 0 不增长
                                只有容器有剩余空间时有效
                         容器盒子的剩余空间分成几份，给到元素
                         
                    flex-shrink 收缩比率
                                默认 1
                                不收缩 0

                             只有容器内容超出时有效

关于flex常用属性

容器   设置为弹性盒的元素
                项目    弹性盒的子元素
                主轴    默认主轴方向从左向右                
                侧轴（交叉轴）：默认主轴方向从上向下

                弹性容器外及弹性子元素内是正常渲染的。
                弹性盒子只定义了弹性子元素如何在弹性容器内布局

            设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

(1)开启弹性盒

           设置为弹性盒容器:
                   display:flex  块级弹性盒
                   inline-flex  行级弹性盒（ 内联块）

(2)flex-direction: 改变主轴方向

             flex-direction: 改变主轴方向
                                （项目排列方向）
                            row 横向排列（默认从左向右）
                                 row-reverse 横向排列（从右向左）
                            column 纵向排列（默认从上向下）
                                 column-reverse （从下向上）

(3)justify-content: 项目主轴方向的对齐方式

      justify-content:  项目主轴方向的对齐方式
                                flex-start：起始位置对齐
                                flex-end：末端位置对齐
                                center：居中对齐
                                space-between：【空白在之间】两端对齐
                                    弹性项目平均分布在该行上,相邻项目之间间隔相等
                                space-around：【空白围绕在两侧】分散对齐
                                    弹性项目平均分布在该行上，项目两侧拥有相等间隔空间

(4)align-items: 项目侧轴方向的对齐方式

align-items: 项目侧轴方向的对齐方式
                        flex-start：侧轴起始位置对齐
                        flex-end：侧轴末端位置对齐
                        center：居中对齐
                        baseline：基线对齐。
                        stretch：拉伸占满容器
                     
                            如果指定侧轴大小的属性值为'auto'，
                            则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

(5)flex-wrap: 项目是否换行

  flex-wrap: 项目是否换行
                           nowrap 不换行
                           wrap   换行（默认起始位置在上）
                           wrap-reverse 反转换行(默认起始位置在下)

(6) align-content: 多根轴线之间的对齐方式（项目为多行时有效）

  align-content: 多根轴线之间的对齐方式（项目为多行时有效）
                     
                        stretch - 默认。各行将会伸展以占用剩余的空间。
                        flex-start - 各行向弹性盒容器的起始位置堆叠。
                        flex-end - 各行向弹性盒容器的结束位置堆叠。
                        center -各行向弹性盒容器的中间位置堆叠。
                        space-between -各行在弹性盒容器中平均分布。
                        space-around - 各行在弹性盒容器中平均分布，
                                        两端保留子元素与子元素之间间距大小的一半。      

(7) order:排列次序

                    默认0                       
                    值越大排列越靠后
                    值相同时，按结构先后顺序排列

    <style>
         .wrap{width: 400px;height: 400px;border:1px solid red;display:flex;}
         .box{width:100px;height:100px;background:pink;}
         .box:nth-child(1){order:3;}
         .box:nth-child(2){order:1;}
         .box:nth-child(3){order:1;}
     </style>
     <div class="wrap">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
     </div>

order

(8) align-self: 弹性盒单个项目在侧轴方向的对齐方式

        auto：为元素的父元素的'align-items'值，
        flex-start：弹性盒子元素侧轴起始边对齐。
        flex-end：弹性盒子元素侧轴结束对齐
        center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
        baseline：该值将参与基线对齐。
        stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

<div class="wrap">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
     </div>
    <style>
        .wrap{width: 400px;height: 400px;border:1px solid red;
            display:flex;align-items: flex-end;
        }
        .box{width:100px;height:100px;background:pink;}
        .box:nth-child(1){align-self: flex-start;}
        .box:nth-child(2){align-self: center;}
        .box:nth-child(3){align-self: stretch;height:auto;}
     </style>

(9)关于flex:

  flex: 分配弹性盒容器的剩余空间
                （份数）
  flex实际上是三个属性的缩写
          flex-basis: 基准值  
          flex-grow: 增长比率   
          flex-shrink 收缩比率
  这三个属性默认值为  0%   0   1

(一)关于flex-grow增长比率

    <style>
        .wrap{
            width: 400px;
            height: 400px;border:1px solid red;
            display:flex;
        }
        .box{width:100px;height:100px;}
        .box:nth-child(1){background:pink;flex-grow:1;}
        .box:nth-child(2){background:yellowgreen;flex-grow:2;}
        .box:nth-child(3){background:skyblue;flex-grow:3;}
     </style>

(二)关于flex-basis增长比率

        .box:nth-child(1){background:pink;flex-grow:1;flex-basis: 50px;}
        .box:nth-child(2){background:yellowgreen;flex-grow:2;}
        .box:nth-child(3){background:skyblue;flex-grow:3;}
       /* 150/6=25 */

这时候box1的width为75px,box2的width为150px,box3的width为175px

(三)关于flex-shrink收缩比率

  .box{width:100px;height:100px;}
        .box:nth-child(1){background:pink;flex-shrink: 1;flex-basis: 50px;}
        .box:nth-child(2){background:yellowgreen;flex-shrink:2;}
        .box:nth-child(3){background:skyblue;flex-shrink:3;}
        .box:nth-child(4){background:orange;flex-shrink:4;}

47.36从和得来?

   50*1+100*2+100*3+100*4 = 950

                             【多余空间】 350-300
            50*1 / 950  =   0.05263157  *  50 =  2.63157
            100*2 / 950  =  0.210526 * 50 = 10.5263
            100*3 / 950  =  0.315789 * 50 = 15.7894
             ....

50-2.63157 = 47.36