the difference between inline-flex and inline-block in CSS

hellopari

已于 2022-07-10 20:33:40 修改

阅读量107

点赞数

分类专栏：前后端文章标签： css 前端 javascript

于 2022-07-10 20:31:16 首次发布

原文链接：https://www.geeksforgeeks.org/what-is-the-difference-between-inline-flex-and-inline-block-in-css/

版权

前后端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

inline-block:表现为行内样式，但是可以设置宽高

<!DOCTYPE html>
<html>
<title>CSS inline-block</title>
<style>
	body {
		text-align: center;
		font-size: 28px;
	}
	
	h1 {
		color: green;
	}
</style>

<body>
	A Online
	<div style="display:inline-block; background-color:yellow; width:auto; height:auto">
		<div style="display:inline; background-color:purple;">Computer</div>
		<div style="display:inline; background-color:orange;">Science</div>
		<div style="display:inline; background-color:cyan;">Portal</div>
	</div>
	for Geeks</body>

</html>

在这里插入图片描述

inline-flex：令设置了flex的container display为 inline，而不是设置里面的item为inline

The main difference between display: flex and display: inline-flex is that display: inline-flex will make the flex container an inline element while its content maintains its flexbox properties.

<!DOCTYPE html>
<html>
<title>CSS inline-block</title>
<style>
	body {
		text-align: center;
		font-size: 28px;
	}
	
	h1 {
		color: green;
	}
</style>

<body>
	A Online
	<div style="display:inline-flex; background-color:yellow; width:auto; height:auto">
		<div style="display:inline; background-color:purple;">Computer</div>
		<div style="display:inline; background-color:orange;">Science</div>
		<div style="display:inline; background-color:cyan;">Portal</div>
	</div>
	for Geeks</body>

</html>

在这里插入图片描述

There is only one main difference between the inline-block and inline-flex:
inline-block: Create specific block for each element under its section maintain the structure of each element. (item之间有间隙)
inline-flex: Does not reserved any specific space in normal form. (item之间无间隙)

hellopari

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
the difference between inline-flex and inline-block in CSS

The main difference between display: flex and display: inline-flex is that display: inline-flex will make the flex container an inline element while its content maintains its flexbox properties.There is only one main difference between the inline-block an
复制链接

扫一扫