div 元素不在下一行换行答案

【问题标题】：Div elements do not wrap on the next linediv 元素不在下一行换行
【发布时间】：2019-11-28 11:07:50
【问题描述】：

我定义了容器显示的flexbox属性：flex;弹性包装：换行；证明内容：中心；但第一行总是有 3 个 div，第二行总是有 2 个 div。浏览器调整大小时如何使其包装div？

我几乎尝试了所有方法（更改了父容器的宽度和高度，将宽度更改为最小宽度/最大宽度，设置父容器边距：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;
}

我希望 div 会在下一行换行。但是第一行总是有 3 个 div，第二行总是有 2 个 div。

【问题讨论】：

这是我第一次使用 Stack Overflow，我很惊讶我这么快就得到了答案。非常感谢！

标签： html css

【解决方案1】：

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

还删除了 1000px 的固定宽度，您希望有一个流畅的父级，以便根据设备或浏览器宽度调整大小。

/* 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>

【讨论】：

如果你想控制一行有多少个.container，你可以试试flex-basis: 25%。

【解决方案2】：

这是因为您在 .parent 上设置了 width:1000px。这意味着无论设备大小如何，父级始终为 1000 像素，并且第一行始终有 3 个元素。

要解决这个问题，设置 .parent {width: 100%;最大宽度：1000px;}

干杯

【讨论】：