Purpose: Making Div Inline. Should Display Be Inline-Flex Or Inline-block

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 prop

Solution 1:

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.