css实现左侧固定，右侧自适应布局，比例1:2:3

css实现左侧固定，右侧比例1:2:3布局

注意: flex 由该三个属性结合 flex-grow flex-shrink flex-basis

<!-- 弹性布局 -->
<style>
        .container{
            height: 100px;
            border: 1px solid blue;
            display: flex;
        }
        .container>div{
            border: 1px solid black;
        }
        .left{
            flex: 0 0 100px;
        }
        .right1{
            flex: 1;
        }
        .right2{
            flex: 2;
        }
        .right3{
            flex: 3;
        }
</style>
<div class='container'>
    <div class="left">1</div>
    <div class="right1">2</div>
    <div class="right2">3</div>
    <div class="right3">4</div>
</div>

<!-- 栅格布局 -->
<style>
        .container{
            width: 100%;
            height: 100px;
            border: 1px solid blue;
            display: grid;
            grid-template-columns: 100px 1fr 2fr 3fr;   /* fr为自动填充 */
        }
        .container>div{
            border: 1px solid black;
        }
</style>
<div class='container'>
    <div class="left">1</div>
    <div class="right1">2</div>
    <div class="right2">3</div>
    <div class="right3">4</div>
</div>