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

display: inline-flexdisplay: 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>

效果图

相关推荐
汪子熙4 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到115 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆10 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er14 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0617 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444020 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆21 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子24 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain931 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人42 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa