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>效果图
