display：flex和display: inline-flex区别

周小航.

于 2022-11-01 18:41:47 发布

阅读量350

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_64103049/article/details/127638930

版权

本文介绍了CSS中flex与inline-flex两种布局方式的区别与应用。通过具体的代码示例，展示了如何利用这两种布局来实现响应式的网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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