如何使用display:flex实现容器内两行图片布局？

要实现第一行5张、第二行4张的图片布局，核心是强制在第5张图片后触发换行。Flex默认仅在容器宽度不足时自动换行，因此需要手动添加换行触发条件。

修改后的代码 #

CSS #

.container2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 让图片顶部对齐，避免被垂直拉伸 */
  gap: 8px; /* 可选：添加图片间距，贴近参考布局的错落感 */
}

/* 触发换行的占位元素 */
.break-line {
  flex-basis: 100%;
  height: 0; /* 不占用垂直空间 */
}

HTML #

<main>
  <section>
    <div>
      <h2>PHOTOS TROP MIGNONNES DE CHATS</h2>
    </div>
    <div class="container2">
      <img class="chatprincipal chathaut" src="https://placekitten.com/200/300">
      <img class="chatprincipal chathaut" src="https://placekitten.com/240/300">
      <img class="chatprincipal chathaut" src="https://placekitten.com/100/200">
      <img class="chatprincipal chathaut" src="https://placekitten.com/200/200">
      <img class="chatprincipal chathaut" src="https://placekitten.com/110/330">
      <!-- 插入换行占位元素 -->
      <div class="break-line"></div>
      <img class="chatprincipal chathaut" src="https://placekitten.com/120/250">
      <img class="chatprincipal chathaut" src="https://placekitten.com/220/300">
      <img class="chatprincipal chathaut" src="https://placekitten.com/130/300">
      <img class="chatprincipal chathaut" src="https://placekitten.com/140/300">
    </div>
  </section>
</main>

原理说明 #

• flex-wrap: wrap 开启Flex换行功能，但仅在容器宽度不足时触发，无法满足强制分两行的需求。
• .break-line 元素通过flex-basis: 100%占满容器整行宽度，迫使后续图片自动换行到下一行。
• align-items: flex-start 确保图片保持自身原始高度，避免被垂直拉伸变形，还原参考布局的错落效果。
• 可选的gap属性为图片添加均匀间距，优化整体视觉体验。

内容的提问来源于stack exchange，提问作者Queen