网站首页 > web开发 > CSS 正文
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内容请搜索开源网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持开源网！
- 上一篇： 详解CSS布局中浮动问题的四种解决方案
- 下一篇： CSS常用样式之绘制双箭头的示例代码
猜你喜欢
- 2021-07-16 CSS八种让人眼前一亮的HOVER效果的示例代码
- 2021-07-16 看完不迷糊的 CSS 盒子模型介绍
- 2021-07-16 CSS 屏幕大小自适应的实现示例
- 2021-07-16 CSS中的translate(-50%,-50%)实现水平垂直居中效果
- 2021-07-16 css实现网页右下角点赞小卡片效果（实例代码）
- 2021-07-16 CSS 选择所有子元素添加样式的方法
- 2021-07-16 CSS子元素跟父元素的高度一致的实现方法
- 2021-07-16 css子元素相对父元素进行定位的实现
- 2021-07-16 纯CSS让子元素突破父元素的宽度限制
- 2021-07-16 CSS实现子元素div水平垂直居中的示例
鲁公网安备 37010202002546号
本文暂时没有评论，来添加一个吧(●'◡'●)