CSS中flex和inline-flex的区别

最新推荐文章于 2024-03-05 11:48:34 发布

iCode王者伟业

最新推荐文章于 2024-03-05 11:48:34 发布

阅读量435

点赞数 1

文章标签： css 前端正本清源

本文链接：https://blog.csdn.net/wang1902568721/article/details/134197989

版权

CSS中flex和inline-flex的区别

起因

display:flex\inline-flex是CSS中弹性布局时，用于容器元素的样式选项。
让人有些糊涂，两者的区别时什么。网上看了一些文章都在扯什么宽度之类的，完全就是胡扯。
还有的写什么“将对象作为弹性伸缩盒显示” “将对象作为内联块级弹性伸缩盒显示”跟绕口令似的。

结论

display:flex和display:inline-flex的共同点是：启用弹性布局。
display:flex和display:inline-flex的区别就是：display:flex容器是一个一般块级元素；display:inline-flex容器则是一个行内块元素。

至于宽高之类的，完全就是块级元素和行内块元素的区别了，一并列一下。

块级元素不写宽，默认宽度占满父容器宽度100%
块级元素不写高，默认高度靠内容撑起来
行内元素设置宽高无效。它的宽高靠内容撑起
自带宽高属性的元素，设置宽高有效（img,table）

测试代码

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container{
                display:flex;
                background-color: blue;
            }
            .inline-flex-container{
                display:inline-flex;
                background-color: gray;
                height: 200px;
            }
            .item{
                background-color: green;
                width:100px;
                height:100px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <span>test1</span>
        <br><hr>
        <div class="inline-flex-container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <span>test2</span>
    </body>
</html>