flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示
flex
.main{
background-color: #0f0;
display: flex;/*父div设置该属性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid black;
}
此时没有为父元素main设置宽度，默认为100%；
inline-flex
//样式
.main{
background-color: #0f0;
display: inline-flex;/*父div设置该属性*/
}
.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>
此处虽然木有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。
