flex:1

忘是亡心i 2023-03-06 05:05 14阅读 0赞

**flex属性** 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

**flex-grow：定义项目的放大比例；**

*  默认为0，即 即使存在剩余空间，也不会放大；
 *  所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
 *  flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。

**flex-shrink：定义项目的缩小比例；**

*  默认为1，即 如果空间不足，该项目将缩小；
 *  所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
 *  flex-shrink为0：空间不足时，该项目不会缩小；
 *  flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

**flex-basis： flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小**

*  默认值为auto，即 项目原本大小；
 *  设置后项目将占据固定空间。

所以:

*  flex属性的**默认值**为：0 1 auto （不放大会缩小）
 *  flex:none **等价于** flex：0 0 auto （不放大也不缩小）
 *  flex:auto **等价于** flex：1 1 auto （ 放大且缩小）
 *  flex为一个非负数字n：该数字为flex-grow的值，

flex：n；等价于

// flex：n；等价于
       flex-grow：n；
    
       flex-shrink：1；
    
       flex-basis：0%；

*  flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值，

flex：n1 n2; 等价于

flex-grow：n1；
    
    flex-shrink：n2；
    
    flex-basis：0%；

*  flex为一个长度或百分比L：视为flex-basis的值，
    
    flex: L; 例如flex：26px； 等价于

flex-grow：1；
    
    flex-shrink：1；
    
    flex-basis：L；

*  flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，
    
    flex：n L； 等价于

flex-grow：n；
    
    flex-shrink：1；
    
    flex-basis：L;

可以发现，flex-grow和flex-shrink在flex属性中不规定值则为0 1，flex-basis为auto。

flex：1即为flex-grow：1，flex-shrink：1；flex-basis：0%；经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

<div class="parent">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
    </div>
     
    <style type="text/css">
        .parent { 
            display: flex;
            width: 600px;
        }
        .parent > div { 
            height: 100px;
        }
        .item-1 { 
            width: 140px;
            flex: 2 1 0%;
            background: blue;
        }
        .item-2 { 
            width: 100px;
            flex: 2 1 auto;
            background: darkblue;
        }
        .item-3 { 
            flex: 1 1 200px;
            background: lightblue;
        }
    </style>

主轴上父容器总尺寸为 600px

子元素的总基准值是：0% + auto + 200px = 300px，其中

0% 即 0 宽度  
auto 对应取主尺寸即 100px  
故剩余空间为 600px - 300px = 300px

伸缩放大系数之和为： 2 + 2 + 1 = 5

剩余空间分配如下：

item-1 和 item-2 各分配 2/5，各得 120px  
item-3 分配 1/5，得 60px  
各项目最终宽度为：

item-1 = 0% + 120px = 120px  
item-2 = auto + 120px = 220px  
item-3 = 200px + 60px = 260px  
当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设

而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间

例二：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]  
item-1：item-2：item-3=0：2：8  
所以  
item-1 0px  
item-2 120px  
item-3 480px

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]: /images/20230208/6c2b3e85e3694d32958bb8c1e079941c.png