我们在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属性值:
值 | 属性 |
---|---|
flex-grow | 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。 |
flex-shrink | 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。 |
flex-basis | 项目的长度。合法值:“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。 |
1 | 与 1 1 0相同。 |
auto | 与 1 1 auto相同。 |
none | 与 0 0 auto相同。 |
initial | 设置该属性为它的默认值,即为 0 1 auto。 |
inherit | 从父元素继承该属性。 |