CS⊙ω⊙S中flex和inline

2021-03-24 03:45 jianzhan

inline-flex 和 inline-block 一样,对里部原素来讲是个 display:flex 的器皿,对外开放部原素来讲是个 inline 的块。

二者的差别叙述:

  • 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>

到此这篇有关CSS中flex和inline-flex的差别详细说明的文章内容就详细介绍到这了,大量有关CSS flex和inline-flex內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!