欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS中flex和inline-flex的区别详解

程序员文章站 2022-06-21 14:45:00
inline-flex 和 inline-block 一样，对内部元素来说是个 display:flex 的容器，对外部元素来说是个 inline 的块。两者的区别描述： flex： 将对象作为...

inline-flex 和 inline-block 一样，对内部元素来说是个 display:flex 的容器，对外部元素来说是个 inline 的块。

两者的区别描述：

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

一句话来描述就是 当flex box 容器没有设置宽度大小限制时，当display 指定为 flex 时，flexbox 的宽度会填充父容器，当display指定为 inline-flex 时，flexbox的宽度会包裹子item，如下图所示：

CSS中flex和inline-flex的区别详解

对应的代码如下所示：

<!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内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

相关标签： css Flex inline-flex

上一篇： 微博情绪地图怎么查看?微博情绪地图查看方法

下一篇： 消息称苹果全力准备：iPad 9、新iPad mini整装待发

推荐阅读