flex 撑满问题

最新推荐文章于 2025-07-16 11:00:20 发布

转载最新推荐文章于 2025-07-16 11:00:20 发布 · 9.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b4c5444e51d45190905fa12

高度撑满

在body.html设置高度
flex 方向为垂直

宽度撑满

flex 方向为横向

css

*{
    padding: 0;
    margin: 0;
}
html,body
{
    height: 100%;
}
.box{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: pink;
}
.box0{
    height: 100px;
    background-color: #5bc0de;
}
.bx{
    background-color: #cccccc;
    height:100%;
    flex:1;
}复制代码

html

<body>
<div class="box">
    <div class="box0">0</div>
    <div class="bx">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
</div>
</body>复制代码

同时还可以设置 flex：1

无论宽和高都是在没有设置固定的宽和高的原素方面设置 100%，就会在屏幕中将剩余的宽和高占满。

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值