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

编程开发 2020-10-19 03:23:24 54

导读

inline-flex和inline-block一样，对内部元素来说是个display:flex的容器，对外部元素来说是个inline的块。两者的区别描述：flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示一句话来描述就是当FlexBox容器没有设置宽度大小限制时，当display指定……

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> <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>   <!--Flex容器中的子Item-->   <div></div>   <div></div>   <div></div>   <div></div> </div> </body> </html>