display的flex和inline-flex属性区别

【前言】

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

下面来讲解下display的flex和inline-flex属性区别

【概论】

flex：将对象作为弹性伸缩盒显示

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

【原理】

赋予父容器更改子元素宽高(或顺序)的能力，来更好的填充可用的空间(主要使其适应各种显示设备和屏幕尺寸)。一个使用Flexbox布局的父容器会伸展每个子元素来填充可用的空间，或者压缩它们来阻止超出父容器。

最重要的是，Flexbox布局在方向上是不可预知的，这一点和常归布局不同(常规布局中块是基于竖直方向排列的，而内联是基于水平方向)。这些常规布局在页面中显示都没问题，但它们缺乏灵活性，难以支撑大型复杂应用的需求，特别是响应方向、大小、伸展、收缩等这些变化。

【适用场景】

Flexbox最适合用在组件和小规模的布局中，如果是更复杂的布局，Grid布局会比较好一些。

由于Flexbox是一个完整的模块，它不单单是一个属性，而是包含了一整套新的属性集，所以这里面涉及到了很多新东西。这些属性中一些是用来设置父容器的，而另外一些是设置子元素的。

【主体】

由一张图简单理解下

使用flex时父元素是block元素，而声明了inline-flex的父元素变成了inline元素

（2）display:flex,换成display:inline-flex，测试结果是，它会根据子元素所有的div大小自适应宽度和高度

display:flex的代码：

<style type="text/css">
        *{margin: 0;padding: 0}
       .main{
           width: 200px;
           background-color: #00bcd4;
           display: flex;
       }
        .main div{
            width: 50px;
            height: 50px;
            border: 1px solid  red;
            box-sizing: border-box;
        }
</style>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>1</div>
        <div>2</div>
        <div>1</div>
        <div>2</div>
    </div>
</body>

display:inline-flex的代码：
想看到效果，将上面的display:flex,换成display:inline-flex,并且将width:200px删除。测试结果是，它会根据子元素所有的div大小自适应宽度和高度。

.main{
           width: auto;
           background-color: #00bcd4;
           display: inline-flex;
}

display的flex和inline-flex属性区别

猜你喜欢