我现在有这个：
.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>
请告诉我您对此的反馈.谢谢！
