css中flex布局的一种用法记录

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