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;
}