大佬教程收集整理的这篇文章主要介绍了html – 每行5个项目,自动调整flexbox中的项目，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
.container { BACkground: gray; width: 600px; display: flex; flex-flow: row wrap; position: relative; } .item { BACkground: blue; width: auto; height: auto; margin: 4px; flex: 1; flex-basis: 20%; }
<div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> <div class="item">F</div> <div class="item">G</div> </div>
我想要做的是在flexbox中每行有5个项目.目前它们没有出现,因为它们没有设定的宽度/高度,这引出了我的下一个问题.是否可以自动调整项目大小以使其中每行适合5个项目？
我该怎么办？
谢谢！
>你给出了20％的弹性基础是正确的.但我们必须调整每个弹性项目的4px余量,以便正确包装：
flex: 0 1 calc(20% - 8pX);
这意味着物品不会超过宽度的20％(调整边距),并且可以根据容器宽度缩小.
>最后给容器一些高度来说明行为.
.container { BACkground: gray; width: 600px; height: 300px; display: flex; flex-flow: row wrap; position: relative; } .item { BACkground: blue; margin: 4px; flex: 0 1 calc(20% - 8pX); }
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
>如果连续少于5个项目,并且您希望它们填写剩余空间,请使用flex：1 1 calc(20％ – 8pX)：
.container { BACkground: gray; width: 600px; height: 300px; display: flex; flex-flow: row wrap; position: relative; } .item { BACkground: blue; margin: 4px; flex: 1 1 calc(20% - 8pX); }
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
请告诉我您对此的反馈.谢谢！
以上是大佬教程为你收集整理的html – 每行5个项目,自动调整flexbox中的项目全部内容，希望文章能够帮你解决html – 每行5个项目,自动调整flexbox中的项目所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。