flex： 將對象作為彈性伸縮盒顯示
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示
flex
.main{
background-color: #0f0;
display: flex;/*父div設(shè)置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid black;
}
此時(shí)沒有為父元素main設(shè)置寬度玫恳，默認(rèn)為100%行楞；
inline-flex
//樣式
.main{
background-color: #0f0;
display: inline-flex;/*父div設(shè)置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid black;
}
.main div:nth-child(2){
height:60px;
}
//DOM
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
此處雖然木有給父元素設(shè)置寬度优质，但是父元素默認(rèn)會根據(jù)子元素的寬高去自適應(yīng)声怔。
