Div元素在下一行不换行

Question

我定义了容器显示的flexbox属性：Flex；flex-wrap：包装；justify-content：Center；但第一行总是有3个div,第二行是2个div。如何使它在浏览器调整大小时换行div？

我几乎尝试了所有的方法（更改了父容器的宽度和高度，将width更改为min-width/max-width，设置父容器的margin：0 auto；）。

<!-- HTML -->
<div class="parent">
  <div class="headline">
    <h2>Tea of the Month</h2>
    <h4>What's Stepping at The Tea Cozy?</h4>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Fall Berry Blitz Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Spiced Rum Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Seasonal Donuts</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Myrtle Ave Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
</div>
<!-- URL of images is correct -->

/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}

我想divs会在下一行结束。但总是有3个div在第一线和2个div在第二线。

Answer 1

您的HTML包含一些无效的闭包标记，请验证您的HTML，您可以签出：https://validator.w3.org/

还删除了1000px的固定宽度，您希望有一个fluid父级，因此它的大小根据设备或浏览器的宽度。

null

/* CSS */

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  /* changed */
  width: 100%;
}

.headline {
  display: block;
  width: 100%;
}

.container {
  margin: 0px 10px;
}

.image {
  width: 300px;
  height: 200px;
}

<!-- HTML -->
<div class="parent">
  <div class="headline">
    <h2>Tea of the Month</h2>
    <h4>What's Stepping at The Tea Cozy?</h4>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Fall Berry Blitz Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Spiced Rum Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Seasonal Donuts</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Myrtle Ave Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
</div>