目的：使内联。应显示为Inline-Flex或Inline-block [英] Purpose: making div inline. Should display be Inline-Flex or Inline-block

问题描述

如果我想与容器div的其他内联元素一起制作一个div，我的目的就是这样做，而不是别的，我应该更喜欢使用内联块还是显示属性或内联flex？无法使用跨度，因为在项目中跨度有一些压倒一切的样式，我禁止使用内联样式。 inline-flex和inline-block之间有没有优点和缺点？这样做的标准应该是什么？

我没有看到两者的输出有任何不同。也许我正在研究一个非常简单的模型来看看有什么不同。我读了一些关于box模型，inline-block和inline-flex的问题，但是找不到任何内容强调使用inline-flex和inline-block的优点和缺点。

<示例代码是这样的：
$ b

.contentContainer {height：40px ; padding：10px;}。contentLabel {margin-left：10px;红色;显示：inline-flex; width：25％;}。content {margin-left：10px;显示：inline-flex; width：70％;}

< div class = contentContainer> < div class =contentLabel>名称< / div> < div class =content>一些随机名称< / div>< / div>

$ b

解决方案

如果您只想显示与其他文本内嵌文本的运行，请使用 display：inline 。 （这是一个范围应该用于一个div，但你有自己的限制...）

如果你想显示一个文本块，但仍然在块中独立的文本流，就好像它仍然是一个块级的元素，使用 display：inline-block 。

你不会看到 inline-block 和 inline-flex 之间的区别。你的div是单行文本，因为inline flex容器中的文本无论如何都被转换成了一个block box，但是 inline-block 是嵌入内容格式的习惯方式作为一个原子框 - inline-flex 适用于实际尝试创建flex布局的情况。

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

b $ b

If I want to make a div in-line with other inline elements of the container div, and my purpose is to just that and nothing else, should I prefer using inline-block or display property or inline-flex? Cannot use spans as there are some overriding styles on span in the project and I'm prohibited from inline-styling. Are there any pros and cons between inline-flex and inline-block? What should be the standard to follow to do this?

I don't see any difference in the output from both. Maybe I'm working on a very simplistic model to see any difference. I read some questions regarding box model, inline-block and inline-flex but couldn't find any content emphasizing on pros and cons of using inline-flex vs inline-block.

Sample code to be something like:

.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>

解决方案

If all you want to do is display a run of text inline with other text, use display: inline. (This is where a span should be used over a div, but you have your limitations...)

If you want to display a block of text inline, but still have its text flow independently within the block as though it were still a block-level element, use display: inline-block.

You won't see any difference between inline-block and inline-flex if the only thing in your div is a single run of text, because the text in an inline flex container is converted into a block box anyway, but inline-block is the idiomatic way of formatting inline content as an atomic box — inline-flex is intended for when you're actually trying to create a flex layout.

If you're trying to format a Web form with each label on the same row as its field, consider table layout, floats, or a complete flex layout instead of just displaying each label as an individual flex container.

这篇关于目的：使内联。应显示为Inline-Flex或Inline-block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！