0

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>
Ray
  • 59
  • 1
  • 5
  • The difference is that `inline-flex` will establish a *flex formatting context*, and `inline-block` will establish a *block formatting context*. These are basic CSS concepts. You'll have to study them to understand them better. Your question is too broad for Stack Overflow. If you have a specific code problem, revise your question. – Michael Benjamin Mar 17 '17 at 03:46
  • Visually they're pretty much the same. But `inline-block` has better browser support, so I would use that instead. – Michael Coker Mar 17 '17 at 03:47

1 Answers1

3

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356