并列的两个盒子，一个有固定宽度，让另一个占满剩余宽度(grid、calc、外边距、flex)，，， flex 布局怎么让短内容撑满剩余宽度

CSSFlexbox:理解并运用`.box2`的自适应增长功能

最新推荐文章于 2024-10-26 17:24:15 发布

原创最新推荐文章于 2024-10-26 17:24:15 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

* {
    margin: 0;
    padding: 0;
}
 
.d {
    display: flex;
    width: 100%;
    height: 200px;
}
 
.box1 {
    width: 200px;
    height: 100%;
    background-color: rgb(88, 121, 80);
}
 
.box2 {
    /* flex: 1; */
    flex-grow: 1; /*  重点 */
    height: 100%;
    background-color: rgb(173, 119, 119)
}