7

I recognize that a <div> and a <span> are displayed differently in a most contexts. They also imply two different structural purposes for an element. But from what I can tell, when using flexbox, elements are displayed the same way, whether they have a <div> or a <span> tag.

Assuming that the these two elements have the same styling, are there any visual differences between between them or will they always act the same when using flex?

14jbella
  • 505
  • 2
  • 14
  • The same, as they both become flex items ... https://stackoverflow.com/questions/39261797/what-are-allowed-values-of-the-display-property-for-a-flex-item-layout-of-fl – Asons Nov 17 '17 at 00:35
  • according to this (https://stackoverflow.com/questions/39261797/what-are-allowed-values-of-the-display-property-for-a-flex-item-layout-of-fl) inline elements are **blockified**. So for me that means, it doesnt matter, if you use `span`, `div` or set `display: block` or `display: inline` - they should all end up the same. – somedotnetguy Aug 12 '22 at 20:03

1 Answers1

4

I have found it is generally best to use block (e.g. div) or inline-block elements as children of flexbox instead of inline elements (e.g. span). You will probably not see a difference in most scenarios, but certain browsers (especially IE) have issue displaying inline elements correctly when they are flex items. See https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items and issues logged there.

Patrick
  • 6,828
  • 3
  • 23
  • 31