html - 为什么不使用 flex-wrap :wrap? 将 flex 元素换行到第二行

Question

我想要一个每行 3 个元素的容器 flex div，问题是当我添加第四个元素时(它应该自动换行到第二行)，而不是它停留在一行并缩小其他元素。我启用了 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 属性。

最后，为了连续放置 3 个元素，您需要从设置的宽度中减去边距/填充，即像这样的 flex:1 1 calc(33.33% - 30px);

请注意，我还可以建议您切换到类和外部 CSS，因为将它们内嵌起来会更难管理，而且更容易出错，因为它更难遵循。

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

堆栈片段

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