可以用flex布局实现这个效果,用到的flex方法有flex-basis,flex-shrink,flex-grow。
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
来,直接实现一下:
<div class="box">
<div class="one"> 111</div>
<div class="two">222</div>
</div>
.box{
width: 100%;
height: 100%;
display: flex;
}
.one{
flex-basis: 100px;
flex-shrink: 0;
background-color: aqua;
}
.two{
flex-grow: 1;
background-color: blue;
}
效果图如下:
有兴趣的小伙伴可以加我微信Leyman233,可以建个群一起交流前端,我也还是个菜鸟,希望能一起进步!!!