css中flex：1的真正含义

css中flex：1的真正含义

我们在css布局的时候经常用到flex：1；

场景1:使具有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：

<div id="main"><div style="background-color:coral;">红色</div><div style="background-color:lightblue;">蓝色</div>  <div style="background-color:lightgreen;">绿色</div>
</div>
<style> 
#main
{width:600px;height:200px;border:1px solid black;display:flex;
}
#main div
{flex:1;
}
</style>

场景2: 使具有弹性盒模型对象的子元素，自动撑满剩余的父元素的宽度

<div id="main"><div style="background-color:coral;">红色</div><div style="background-color:lightblue;">蓝色</div>  <div style="background-color:lightgreen;flex:1">绿色flex:1</div>
</div>
<style> 
#main
{width:600px;height:200px;border:1px solid black;display:flex;
}#main div
{width:100px;
}
</style>

flex属性值：