css flex布局基础

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>