flex: 1的同时设置width:0
使用flex布局遇到一个用法记录:
左边宽度固定,右边自动撑满,一般情况下,我们都会很自然的设置父级元素display:flex,给左边元素一个固定宽度,右边元素一个flex:1,就完事了,这样也是没问题的。但是当我使用媒体查询去兼容设置父级元素的宽度后,当父级元素的宽度变化,右边子元素并没有自适应的去撑满剩余宽度,导致没有预期效果,研究之后发现右边元素添加一个width:0,就有奇效了。
<div class="box">
<div class="left">1</div>
<div class="right">2</div>
</div>
.box{
display:flex;
}
.left{
width:100px;
}
.right{
flex:1;
}
@media screen and (min-width: 1681px) {
.box{
width: 1440px;
}
}
@media screen and (max-width: 1680px) {
.box{
width: 1200px;
}
}
仅以上代码,初始之时,屏幕宽度为1920px,父级元素的宽度为1440px,right元素会撑满剩余宽度,是正常的,但是当我把屏幕缩小至小于1680px后,父级元素的宽度变为1200px,但是此时right元素的宽度还是之前1440px剩余的宽度,并没有自适应父级元素变为1200px之后的剩余宽度,没有出现预期的效果,经过研究后找出了解决办法
解决方案:
给right元素设置一个width为0,就会到达预期的效果。
<div class="box">
<div class="left">1</div>
<div class="right">2</div>
</div>
.box{
display:flex;
}
.left{
width:100px;
}
.right{
flex:1;
width:0;
}
@media screen and (min-width: 1681px) {
.box{
width: 1440px;
}
}
@media screen and (max-width: 1680px) {
.box{
width: 1200px;
}
}