所以我想要一个容器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>
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);堆栈代码段