React/响应式布局/08.给子元素设置伸缩...

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div0 {
            display: flex;
            width: 400px;
            height: 500px;
            background-color: aqua;
        }

        #div0 div {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* flex-basis 属性用于设置或检索弹性盒伸缩基准值（就是设置子元素的宽度），上面的 width 将失效 */
            /* flex-basis: 30%;       30% 是父元素宽度的 30% ，也可以使用 px、rem */
        }

        #div0 div:nth-child(1) {
            flex-basis: 50px;

            /* flex-grow 属性用于设置或检索弹性盒子的扩展比率 */

            /* 计算过程：
            父元素宽度 - 第一个子元素宽度 - 第二个子元素宽度     400 - 50 - 100 = 250px
            再将剩余的 250px 的宽度 除以 总份数（全部子元素的份数），因为第一个和第二个子元素都设置了 flex-grow: 1 ，表示每个子元素占一份，总共 2 份
            250 / 2 = 125   每份为 125 px 
            再将子元素的宽度 + 占比份数 x 每份宽度（1 x 125, 如果是两份就是 2 x 125）
            第一个子元素宽度： 50 + 125 = 175
            第二个子元素宽度： 100 + 125 = 225
            */
            flex-grow: 1;
        }

        #div0 div:nth-child(2) {
            flex-basis: 100px;
            flex-grow: 1;
        }

        #div1 {
            display: flex;
            margin-top: 50px;
            width: 400px;
            height: 500px;
            background-color: aqua;
        }

        #div1 div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        #div1 div:nth-child(1) {
            flex-basis: 300px;
            
            /* flex-shrink 是设置弹性盒子的缩小比率 */
            /* 计算过程跟 flex-grow 一样
            计算超出部分：父元素宽度 - 所有子元素宽度    400 - 300 - 300 = -200
            超出部分 / 所有子元素份数的总和    200 / 4 = 50
            第一个子元素：300 - 50 x 1 = 250
            第二个子元素：300 - 50 x 3 = 150 
            */
            flex-shrink: 1;
        }

        #div1 div:nth-child(2) {
            flex-basis: 300px;
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <div id="div0">
        <div>1</div>
        <div>2</div>
      </div>
    
    <div id="div1">
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>