フレックスレイアウトアプリケーション---子ボックスの固定幅と子ボックスの適応親ボックス幅

1.効果を実現するには：赤いボックスの一定幅、青いボックスの幅、ボックスの適応親幅2.html

を実現するには

<div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>

css

.father {
    
    
            width: 50%;
            height: 600px;
            background-color: lightgray;
            margin: 0 auto;
            /* 父级元素一定要写display: flex; */
            display: flex;
        }
        
        .box1 {
    
    
            /* 定义子项目分配剩余空间，表示占多少份数 */
            flex: 1;
            height: 50px;
            background-color: skyblue;
        }
        
        .box2 {
    
    
            width: 50px;
            height: 50px;
            background-color: red;
        }