Purpose: making div inline. Should display be Inline

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.

链接地址: http://www.djcxy.com/p/13192.html

上一篇: 是否可以显式设计匿名弹性项目？

下一篇: 目的：使内联。 应该显示为内联