Flexbox仅在使用<img>标签而非<picture>标签时正常工作的问题排查求助

Hey Marco, I’ve run into this exact gotcha before—let’s break down why your layout is breaking when using <picture> and how to fix it quickly.

The Root Cause #

When you use <img> directly in a Flex container, the browser treats the image as a replaced element and uses its width property to calculate the flex item’s size. But <picture> is a container element (not a replaced element), so by default, it doesn’t inherit the sizing rules from its child <img>. This means your Flex container can’t correctly determine how much space each <picture> item should take, throwing off the flex-wrap and justify-content: space-between behavior.

The Fix #

You just need to apply the same width rules to your <picture> elements that you’re using for their internal <img> tags. This tells the Flex container exactly how much space each item should occupy. Here’s your modified code:

<div style="background:red;width:300px;display:flex;flex-wrap:wrap;padding:1em;justify-content:space-between;">
  <!-- First picture: full width with bottom spacing -->
  <picture style="width:100%;margin-bottom:2%;">
    <source type="image/avif" srcset="xxx.avif">
    <img alt="xxx" src="xxx.jpg" style="width:100%;height:auto;">
  </picture>
  <!-- Two side-by-side pictures -->
  <picture style="width:49%;">
    <source type="image/avif" srcset="xxx.avif">
    <img alt="xxx" src="xxx.jpg" style="width:100%;height:auto;">
  </picture>
  <picture style="width:49%;">
    <source type="image/avif" srcset="xxx.avif">
    <img alt="xxx" src="xxx.jpg" style="width:100%;height:auto;">
  </picture>
</div>

Key Changes Explained: #

• Added width:100% to the first <picture> to match its child img’s full-width rule
• Set width:49% on the two smaller <picture> elements to align with their img sizing
• Replaced the img’s padding-bottom:2% with a margin-bottom:2% on the first picture (this keeps spacing outside the flex item, which is cleaner for Flex layout calculations)

Alternatively, you could use flex: 0 0 [width-value] instead of setting width directly—this explicitly tells the Flex container not to grow or shrink the item, and sets its base size to your desired width. Either approach will fix the layout issue.

If you still see problems after this, double-check that there’s no extra margin/padding on the <picture> or <img> elements that might be adding unexpected space.

内容的提问来源于stack exchange，提问作者Marco M.