关于css:CSS中flex和inlineflex的区别

2次阅读

共计 641 个字符，预计需要花费 2 分钟才能阅读完成。

两者的区别形容：

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>

结束

正文完