CSS中flex和inline-flex的区别

最新推荐文章于 2024-04-07 23:21:31 发布

早起的年轻人

最新推荐文章于 2024-04-07 23:21:31 发布

阅读量7.1k

点赞数 13

分类专栏： Vue开发中的点点滴滴文章标签： Flex布局 Css Flex inline-flex

本文链接：https://blog.csdn.net/zl18603543572/article/details/108309273

版权

Vue开发中的点点滴滴专栏收录该内容

29 篇文章 5 订阅

订阅专栏

两者的区别描述：

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

一句话来描述就是当Flex Box 容器没有设置宽度大小限制时，当display 指定为 flex 时，FlexBox 的宽度会填充父容器，当display指定为 inline-flex 时，FlexBox的宽度会包裹子Item，如下图所示：
在这里插入图片描述
对应的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>

    /*Flex 容器*/
    .flex__container {
      display: inline-flex;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 50px;
      height: 50px;

      background-color: aqua;
      border: 1px solid black;
    }

  </style>
</head>
<body>

<!--Flex容器-->
<div class="flex__container">

  <!--Flex容器中的子Item-->
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

</body>
</html>