一、flex属性

flex是flex-grow、flex-shrink和flex-basis这三个属性的缩写。首先来看看这三个属性的定义：

flex-grow：该元素获得（伸张）多少正可用空间（positive free space）？
flex-shrink：该元素要消除（收缩）多少负可用空间（negative free space）？

该属性用于处理浏览器计算弹性元素的 flex-basis 值，并发现它们太大以至于无法适应弹性容器的情形。只要 flex-shrink 有正值，元素就会收缩以至于它们不会溢出容器。

flex-basis：在该元素未伸张和收缩之前，它的大小是多少？

通俗的理解，举个例子：A给5个孩子分财产，总共有300万。

flex-grow相当于财产分完有剩余，该如何分配。
flex-shrink相当于财产分配不足，该如何分配。
flex-basis相当于分配得到的固定财产。

二、flex语法

在Flex布局中，一个Flex子项的宽度是由元素自身尺寸，flex-basis设置的基础尺寸，以及外部填充（flex-grow）或收缩（flex-shrink）规则3者共同决定的。

js 复制代码

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
//默认值：flex:0 1 auto

js 复制代码

    flex: auto;
    flex: none;
    /* 1个值，flex-grow */
    flex: 1;
    /* 1个值，flex-basis */
    flex: 100px;
    /* 2个值，flex-grow和flex-basis */
    flex: 1 100px;
    /* 2个值，flex-grow和flex-shrink */
    flex: 1 1;
    /* 3个值 */
    flex: 1 1 100px;

当flex定义为一个或者两个值时，如果是长度值（如：100px），则值flex-basis。

三、flex计算尺寸

3.1 计算尺寸优先级

实际上在Flex布局中，一个flex子项的最终尺寸是基础尺寸、弹性增长或收缩、最大最小尺寸限制共同作用的结果。其中：

基础尺寸由CSS flex-basis属性，width等属性以及box-sizing盒模型共同决定；
弹性增长指的是flex-grow属性，弹性收缩指的是flex-shrink属性；
最大最小尺寸限制指的是min-width/max-width等CSS属性，以及min-content最小内容尺寸。最终计算的优先级。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 100%;
            background-color: pink;
            display: flex;
        }
       
        .lt{
            flex:0 0 200px;
            background: blue;
            max-width: 100px;
        }
        .ct{
            flex:1 1 auto;
            background: burlywood;
        }
        .rt{
            flex:0 0 200px;
            background: blueviolet;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="lt box"></div>
        <div class="ct box"></div>
        <div class="rt box"></div>
    </div>
</body>
</html>

复制代码

最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸

3.2 计算尺寸方式

弹性增长（flex-grow）

css 复制代码

 .container{
    width: 1000px;
    height: 100px;
    display: flex;
}
   
.lt{
    flex:1 0 200px;
    background: blue;
}
.ct{
    flex:2 0 auto;
    background: burlywood;
}
.rt{
    flex:2 0 200px;
    background: blueviolet;
}

总宽度1000px-基本宽度200px-基本宽度200px = 600px

600/5（flexGrow和） = 120

所以计算得到：

lt：120+200px(flex-basis) = 320px;
ct: 120*2 = 240;
rt:120*2+200px(flex-basis) = 440

弹性收缩（flex-shrink）