目的：使内联。 应该显示为内联
如果我想让一个div与容器div的其他内联元素联机，并且我的目的只是为了那个，而不是别的，我应该更喜欢使用inline-block或display属性还是inline-flex？ 不能使用跨度，因为在项目中跨度有一些压倒一切的样式，并且我禁止使用内联样式。 inline-flex和inline-block之间有没有优点和缺点？ 应该遵循什么标准来做到这一点？
我没有看到两者的输出有任何不同。 也许我正在研究一个非常简单的模型来看看有什么不同。 我阅读了关于box模型，inline-block和inline-flex的一些问题，但是找不到任何内容强调使用inline-flex和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> 如果您只想在其他文本上display: inline文本，请使用display: inline 。 （这是跨度应该在div上使用的地方，但是你有自己的局限......）
如果要以内联方式显示文本块，但仍然在文本块中独立显示文本流，就像它仍然是块级元素一样，请使用display: inline-block 。
如果你的div中唯一的文本是单行文本，你将不会看到inline-block和inline-flex之间的任何区别，因为内联flex容器中的文本无论如何都被转换成了一个block box，但是inline-block是将内联内容格式化为原子框的惯用方式 - inline-flex适用于实际尝试创建柔性布局的情况。
如果您尝试使用与其字段相同的行上的每个标签格式化Web表单，请考虑表格布局，浮动或完整的柔性布局，而不是将每个标签显示为单独的柔性容器。
链接地址: http://www.djcxy.com/p/13191.html