1:flex:
让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容 (块级元素)
<div id="main" >
<div style="background-color:coral;">蓝色</div>
<div style="background-color:lightblue;">红色</div>
<div style="background-color:coral;">蓝色</div>
<div style="background-color:lightblue;">红色</div>
<div style="background-color:coral;">蓝色</div>
<div style="background-color:lightblue;">红色</div>
<div style="background-color:coral;">蓝色</div>
<div style="background-color:lightblue;">红色</div>
</div>
#main
{
width:220px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
效果:
2:flex-basis 项目的长度。合法值:“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字
<div id="main1" >
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>