【CSS】display：flex和display: inline-flex区别

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

DOM结构

"main">
    

    

    

    

  

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;
}

此处虽然木有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。

总结：
导致这个效果的根本原理还是inline和block的区别

服务器托管，北京服务器托管，服务器租用 http://www.fwqt服务器托管网g.net

相关推荐: 【北邮鲁鹏老师计算机视觉课程笔记】07 Local feature-Blob detection

【北邮鲁鹏老师计算机视觉课程笔记】07 Local feature-Blob detection 1 实现尺度不变性服务器托管网 不管多近多远，多大多小都能检测出来 找到一个函数，实现尺度的选择特性 2 高斯偏导模版求边缘 做卷积 3 高斯二阶导=拉普拉斯 看…