display: inline-flex的妙用以及和display: flex 的区别是什么?

有时候我们使用了display: flex属性后,子元素横向排列,你可能会发现如下图现象:
父级元素不设置宽度,红色背景宽度默认100%展示,如果这时想让父级元素随着子元素宽度自适应,怎么处理?在这里插入图片描述

接下来,上代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .wrap {
            display: flex;
            background: red;
            border: 2px solid #000;

        }

        .wrap1 {
            display: inline-flex;
            background: red;
            border: 2px solid #000;
            margin-top: 40px;
        }

        .item {
            width: 100px;
            height: 100px;
            background: blue;
            border: 2px solid #000;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="wrap1">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

</html>

运行结果如下图:
display: inline-flex的妙用以及和display: flex 的区别是什么?_第1张图片

得出结论如下:

使用了display: flex 属性后,父元素不设置宽度,宽度就是100%;不会被子元素宽度撑开;
使用了display: inline-flex 属性后,父元素不设置宽度,宽度就是所有的子元素宽度之和,会被子元素宽度撑开,实现宽度自适应;

你可能感兴趣的:(css,css,html,html5)