html - 目的 : making div inline. 应显示为 Inline-Flex 或 Inline-block

Question

如果我想让一个 div 与容器 div 的其他内联元素内联，而我的目的仅此而已，我应该更喜欢使用 inline-block 或 display property 还是 inline-flex？不能使用 span，因为元素中的 span 有一些覆盖样式，我被禁止使用内联样式。 inline-flex 和 inline-block 之间有优缺点吗？这样做应该遵循什么标准？

我看不出两者的输出有任何区别。也许我正在研究一个非常简单的模型以查看任何差异。我阅读了一些关于盒子模型、内联 block 和内联 flex 的问题，但找不到任何强调使用内联 flex 与内联 block 的优缺点的内容。

示例代码如下:

.contentContainer {
  height: 40px;
  padding: 10px;
}

.contentLabel {
  margin-left: 10px;
  color: red;
  display: inline-flex;
  width: 25%;
}

.content {
  margin-left: 10px;
  display: inline-flex;
  width: 70%;
}

<div class="contentContainer">
  <div class="contentLabel">Name</div>
  <div class="content">Some Random Name</div>
</div>

Answer 1

如果您只想显示一段与其他文本内联的文本，请使用 display: inline。 (这是应该在 div 上使用 span 的地方，但你有你的局限性......)

如果您想内联显示一个文本 block ，但仍使其文本在 block 内独立流动，就好像它仍然是 block 级元素一样，请使用 display: inline-block。

如果您的 div 中只有一行文本，您将看不到 inline-block 和 inline-flex 之间的任何区别，因为文本无论如何，内联 flex 容器都会转换为 block 框，但是 inline-block 是将内联内容格式化为原子框的惯用方式 — inline-flex 用于以下情况您实际上是在尝试创建 flex 布局。

如果您尝试格式化 Web 表单，使每个标签与其字段位于同一行，请考虑表格布局、 float 或完整的 flex 布局，而不是仅将每个标签显示为单独的 flex 容器。