Question

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

启用了包装

这是我的代码：

＆＃13;

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

＆＃13;

Answer 1

首先，您w中的flew-wrap:wrap;拼错了flex-wrap:wrap;

然后您可以/需要删除flex-flow:row;，这是默认值，但也会将nowrap设置回来，在 flex-wrap属性之后定位在风格。

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

请注意，我可能还建议您切换到类和外部CSS，因为它们更难以管理并且更容易出错，因为它更难以理解。

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

Stack snippet

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

为什么没有使用flex-wrap：wrap？将元素包装到第二行？

1 个答案: