为什么不使用 flex-wrap:wrap 将 flex 元素包装到第二行？

Question

我想要一个容器 flex div，每行有 3 个元素，问题是当我添加第四个元素（它应该自动换行到第二行）时，它会停留在单行上并缩小其他元素。我启用了 flex-wrap: wrap;

这是我的代码：

<div class="border" style="width:100%; height:auto; position:relative; display:flex; flex-wrap:wrap; justify-content:flex-start; ">
  <div class="border" style="flex:1 1 33.33%; height:400px; margin-bottom:10px; margin-right:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-HowMuchExerciseDoesMyDogNeed-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#">
      <h6 style="color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6>
    </a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 33.33%; height:400px; margin-bottom:10px; margin-right:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-HomeToRoamFindTheRightDogForYourApartment-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#">
      <h6 style="color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6>
    </a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 33.33%; height:400px; margin-bottom:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-GoDogGoCrateCarrierGateOrKennel-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#">
      <h6 style=" color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6>
    </a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 33.33%; height:400px; margin-bottom:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-GoDogGoCrateCarrierGateOrKennel-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#">
      <h6 style=" color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6>
    </a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
</div>

Answer 1

首先，您在flew-wrap:wrap; 中拼错了w，应该是flex-wrap:wrap;

然后您可以/需要删除flex-flow:row;，这是默认设置，但也将nowrap 设置回来，定位在样式中的flex-wrap 属性之后。 p>

最后，要连续放置 3 个项目，您需要从设置的宽度中减去边距/填充，即类似 flex:1 1 calc(33.33% - 30px);

请注意，我还建议您切换到类和外部 CSS，因为内联它们更难管理，更容易出错，因为它更难遵循。

注意 2，flex 简写中的 calc() 在 IE 中不起作用，您需要使用简写 flex-basis，即 flex-basis: calc(33.33% - 30px);

堆栈sn-p

<div class="border" style="width:100%; height:auto; position:relative; display:flex; flex-wrap:wrap; justify-content:flex-start;">
  <div class="border" style="flex:1 1 calc(33.33% - 30px); height:400px; margin-bottom:10px; margin-right:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-HowMuchExerciseDoesMyDogNeed-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
	<a href="#"><h6 style="color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6></a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 calc(33.33% - 30px); height:400px; margin-bottom:10px; margin-right:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-HomeToRoamFindTheRightDogForYourApartment-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#"><h6 style="color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6></a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:1 1 calc(33.33% - 30px); height:400px; margin-bottom:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-GoDogGoCrateCarrierGateOrKennel-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#"><h6 style=" color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6></a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
  <div class="border" style="flex:0 1 calc(33.33% - 30px); height:400px; margin-bottom:10px; text-align:center; padding:10px 10px;">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/ARTHMB-GoDogGoCrateCarrierGateOrKennel-20160818?$AR1104$" style="width:100%; height:70%; position:relative;">
    <a href="#"><h6 style=" color: rgba(0, 0, 255, 0.6); font-weight:900; font-size:12px; margin-top:10px; ">HEALTH & CARE</h6></a>
    <h5 style="font-weight:600;">How much exercise does my dog need?</h5>
  </div>
</div>