dispaly: inline-flex 和 display: flex 的区别

Lysun001

于 2025-04-17 10:00:15 发布

阅读量464

点赞数 6

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/lotpyve/article/details/147294367

版权

display: inline-flex 和 display: flex 都是 CSS 中用于创建弹性盒子布局（Flexbox）的属性值，但它们之间有一些关键的区别，主要体现在元素如何在页面上被渲染和它们对周围元素的影响。

主要区别

1，块级 vs 行内块级
display: flex：将一个元素设置为块级弹性容器。这意味着它会像其他块级元素（如 <div>）一样开始新的一行，并且可以设置宽度、高度等属性，不会与其他块级元素在同一行显示。
display: inline-flex：将一个元素设置为行内块级弹性容器。与 inline-block 类似，它允许该元素与其他行内元素在同一行显示，而不会强制新行开始。但是，它仍然保持了作为弹性容器的所有功能。

2，外部显示类型（External Display Type）
对于 display: flex，其外部显示类型为块级（block），这意味着它遵循块级元素的布局规则。
而 display: inline-flex 的外部显示类型为行内块级（inline-block），这使得它可以和其他行内元素一起出现在同一行内，除非空间不足导致换行。

3，布局影响
使用 display: flex 时，该元素会占据整个可用宽度（如果未明确指定宽度的话），并且通常会独占一行。
使用 display: inline-flex 时，元素仅占用其内容所需的宽度，并允许其他行内或行内块级元素与其并排显示在同一行中。

下面来看代码示例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.flex .box {

			width: 500px;
			background: yellow;
			display: flex;
			justify-content: space-between;
		}

		.inline-flex .box {
			width: 500px;
			background: pink;
			display: inline-flex;
			justify-content: space-between;
		}
	</style>
</head>

<body>
	<div class="flex">
		<div class="box">
			<span>123</span>
			<span>456</span>
		</div>
		<span>额外的</span>
	</div>
	<div class="inline-flex">
		<div class="box">
			<span>123</span>
			<span>456</span>
		</div>
		<span>额外的</span>
	</div>
</body>

</html>

效果图