Question

如果我想使div与容器div的其他内联元素一致，我的目的只是那个而不是别的，我应该更喜欢使用inline-block或display属性还是inline-flex？不能使用跨度，因为项目中的跨度上有一些重写样式，我禁止使用内联样式。 inline-flex和inline-block之间是否有任何优缺点？这样做的标准应该是什么？

我认为两者的输出没有任何差别。也许我正在研究一个非常简单的模型，看看有什么区别。我读了一些关于盒子模型，内联块和内联flex的问题，但是找不到任何强调使用inline-flex vs inline-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上使用跨度的地方，但你有自己的局限性......）

如果要显示内联文本块，但仍然在块中独立显示文本流，就像它仍然是块级元素一样，请使用display: inline-block。

如果div中的唯一内容是单行文本，则inline-block和inline-flex之间不会有任何区别，因为内联flex容器中的文本被转换为块框无论如何，inline-block是将内联内容格式化为原子框的惯用方法 - inline-flex适用于您实际尝试创建flex布局时。

如果您尝试使用与其字段相同的行上的每个标签格式化Web表单，请考虑表格布局，浮点数或完整的Flex布局，而不是仅将每个标签显示为单个Flex容器。

目的：使div内联。应显示为Inline-Flex或Inline-block

1 个答案: