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

 

 父元素根據子元素去排