display的flex跟inline-flex属性区别

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

 

 

 

 

 

 

.

相关内容推荐