当前位置: 移动技术网 > IT编程>网页制作>CSS > CSS中flex和inline-flex的区别详解

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

2020年09月02日  | 移动技术网IT编程  | 我要评论
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,如下图所示:

对应的代码如下所示:

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网