flex 设置弹性盒子布局（使子元素动态的占据20%，30%，50%）

默认情况下，flex值为1，也就是占用弹性容器剩余位置的1份

使用flex修改弹性伸缩比的示例：

<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: #f00;
            display: flex;
        }
        .item {
            height: 200px;
        }
        .item1 {
            flex: 1;
            background-color: pink;
            /* 弹性伸缩比为1 */
        }
        .item2 {
            flex: 2;
            background-color: #0f0;
            /* 弹性伸缩比为2 */
        }
        .item3 {
            flex: 3;
            background-color: #00f;
            /* 弹性伸缩比为3 */
        }
    </style>
</body>

 









            

            
posted @ 
2024-11-07 16:17 
洛飞 
阅读(718) 
评论(0) 
 
收藏 
举报