flex和display: inline-flex区别

flex：将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示

flex

　　.main{
      background-color: #0f0;
      display: flex;/*父div设置该属性*/
    }               
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }

子元素根据父元素去排，如果子元素宽度超出父元素的宽度，因为flex布局，实际子元素的宽度并不会超过，只会按比例排放。

inline-flex

display:inline-flex

父元素根据子元素去排

flex和display: inline-flex区别

推荐阅读