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>

效果图

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
袁煦丞9 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作