0

I have the following content in a html file.

<body>
  <img src="img/img1.svg" alt="" />
  <hr />
  <div class="flex-container">
    <img src="img/img1.svg" alt="" />
  </div>
</body>

.flex-container {
   display: flex;
}

Basically, it's just a simple webpage with 2 identical images. The only difference is just that the first <img /> element is stand-alone, while the second one is nested inside a flex container.

By default, <img /> is inline element. When I open the chrome dev tool and inspect the 1st image, I get the following result:enter image description here

However, when I inspect the second image, I find the display property of the img is changed to block:enter image description here

I'm confused. I don't understand why and how the second image element is changed from inline to block. By looking into the Styles tab, I cannot see any changes to either of the 2 image elements, but the computed values for display property are different

Passerby
  • 9,715
  • 2
  • 33
  • 50
user14427500
  • 11
  • 1
  • 1
    Have a look at the spec, it mentions that when element display is set to flex, children become flex items and flex items are block level elements. https://drafts.csswg.org/css-flexbox-1/#flex-items Can you describe the problem that it creates for you, so may be we can propose a solution? – Yevgeniy Jan 12 '22 at 02:31
  • @Yevgeniy it's not any problem it causes. I'm just curious whether there is a way for us to see the details of computed property in chrome dev tool. Because as you see in the screenshots, it just gives me a final computed result, telling me that the display property is now "block". But in the Styles Tab, there is no way for me to tell the underneath calculations. It doesn't tell me its default value is "inline", then overwritten by its container. I want to know if there is way to know that from the dev tool – user14427500 Jan 12 '22 at 02:40
  • Also see this related question: https://stackoverflow.com/questions/39261797/what-are-allowed-values-of-the-display-property-for-a-flex-item-layout-of-fl?rq=1 – connexo Jan 12 '22 at 02:40

1 Answers1

3

From the specification:

CSS Flexible Box Layout Module Level 1

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)
https://www.w3.org/TR/css-flexbox-1/#flex-items

and, as mentioned therein:

If a layout-internal box is blockified, its inner display type converts to flow so that it becomes a block container.
https://www.w3.org/TR/css-display/#blockify

connexo
  • 53,704
  • 14
  • 91
  • 128
  • The second half of this is irrelevant. Layout-internal boxes are those which are `display:table-*` and `display:ruby-*`. `img` elements are replaced elements and can't generate block container boxes. – Alohci Jan 12 '22 at 08:39