CSS实现一个固定宽度另一个占满剩余空间的布局

池墨墨

于 2019-11-07 21:51:29 发布

阅读量7.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Web前端 CSS 弹性布局

本文链接：https://blog.youkuaiyun.com/u013551952/article/details/102963669

Web前端同时被 3 个专栏收录

4 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

弹性布局

1 篇文章

订阅专栏

本文介绍了一种使用弹性盒子（Flexbox）实现特定布局的方法。在一个父布局中，通过设置多个子布局，其中部分子布局固定宽度，而最后一个子布局则采用flex属性占据剩余空间，从而实现了灵活且响应式的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中经常碰到布局：一个父布局，包含多个子布局，其中一个或多个固定宽度，最后一个占满剩余空间。

遇到这种需求，可以用弹性盒子来实现。

布局如下：

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

style如下：

.parent{
    height: 100px;
    display: flex;
}
.child1{
    width: 200px;
    background: red;
}
.child2{
    width: 300px;
    background: green;
}
.child3{
    flex: 1;
    background: blue;
}

效果如下：
效果图