CSS中flex和inline-flex的使用不一样在哪

发布时间：2023-09-06 13:54:49 所属栏目：语言来源：

导读：关于“CSS中flex和inline-flex的使用不同在哪”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友

关于“CSS中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>



<div class="flex__container">

  

  <div class="flex__item"></div>

  <div class="flex__item"></div>

  <div class="flex__item"></div>

  <div class="flex__item"></div>

</div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!