十五、flex弹性元素的样式

目录：
1. 基本布局
2. 弹性元素的属性：flex-grow
3. 弹性元素的属性：flex-shrink
4. 弹性元素的属性：flex-basis
5. flex 统一设置这3个属性（常用）
6. order

一、基本布局

    

        
1
        
2
        
3
    

二、弹性元素的属性：flex-grow

• flex-grow：1 表示所有元素平均分配剩下的空白，比如空白300，那么每个
  方框就在弹长100。

    li{
        
			width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 弹性元素的增长系数 */
            flex-grow: 1;
        }


        li:nth-child(2){
            background-color: pink;
          
        }
        li:nth-child(3){
            background-color: orange;
        
        }

• • 如果每一个都设置了增长系数，假设剩余空白是300， 现在总共系数分配比例：1 + 2 + 3 = 6，300 / 6 = 50, 对应的每个方框，弹长：1* 50 = 50, 2 * 50 = 100, 3 * 50 = 150

    li{
        
			width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 弹性元素的增长系数 */
            flex-grow: 1;
        }


        li:nth-child(2){
            background-color: pink;
             /*增长系数是按照比例去分配的， */
            flex-grow: 2;
        }
        li:nth-child(3){
            background-color: orange;
            flex-grow: 3;
        }

三、弹性元素的属性：flex-shrink

• flex-shrink:弹性元素的缩减系数，默认1

测试：把父类ul 的width设置小点，会发现里面的元素，会自动缩减，以适应父类边框变小的情况。

    

        
1
        
2
        
3
    
  

四、弹性元素的属性：flex-basis

   flex-basis 指定的是元素在主轴上的基本长度
                如果主轴 - 横向 - 则该值指定的就是元素的宽度 - 原来设置li的width无效
                如果主轴 - 纵向 - 则该值指定的就是元素的高度- 原来设置li的height无效
                 - 默认值是auto,表示参考元素自身的高度或宽度
                 - 如果传递了一个具体的数值，则以该值为准

• flex-basis: 设置弹性元素的基础长度。一旦这里设定了100px， li里面设定的width:200px,就失效了。

总的可以理解为：flex-basis: 100px; 表示设置了这个弹框的宽度是100， 然后这个弹簧能弹多长，由flex-grow来确定，越大越长。这个弹框能够缩多短，由flex-shrink来决定。 所以这3个属性，就是弹簧的3种状态

五、flex 统一设置这3个属性（常用）

- 通常我们在运用这几个属性的时候，不会一个个这样单独设置，而是直接一起写.
- 假设我们想要的效果是：flex-grow:增长系数1， flex-shrink:缩减系数1， flex-basis:基础值 auto  
 - flex 可以设置弹性元素所有的3个样式
   flex 增长 缩减  基础

    

        
1
        
2
        
3
    

    

• flex 除了可以自己设置值，还有几个固定的可选值

•        initial  "flex:0 1 auto"
           auto    "flex: 1 1 auto"
           none    "flex:0 0 auto" 设置这个，表示弹性元素没有弹性了
  

 li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        
            /* 
            flex 可以设置弹性元素所有的3个样式
            flex 增长 缩减  基础
               initial  "flex:0 1 auto"
               auto    "flex: 1 1 auto"
               none    "flex:0 0 auto" 设置这个，表示弹性元素没有弹性了
            */
            flex: initial;

        }

六、order

• 控制元素的排列顺序

  li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
           
            flex: initial;

        }
        li:nth-child(1){
            /* order 决定弹性元素的排列顺序 */
            order:3;
        }

        li:nth-child(2){
            background-color: pink;  
            order:2;
        }
        li:nth-child(3){
            background-color: orange;
            order:1;
        }

注意：flex 对IE 8,9可能支持不是很好,移动端随意使用。 浮动和flex优先推荐flex