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