每行5个项目,Flexbox中的项目会自动调整大小 [英] 5 items per row, auto-resize items in 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个项目?
What I'm trying to do is have 5 items per row in a flexbox. Currently they don't appear because they don't have a set width/height, which leads me to my next question. Is it possible to auto-resize the items in order for 5 of them to fit per row?
我该怎么做?
谢谢!
推荐答案
您正确地给出了flex-basis: 20%
,但是您必须将每个 flex项目上的4px边距调整为自动换行.
You are right in giving a flex-basis: 20%
but you have to adjust for the 4px margin on each flex item for it to wrap properly.
使用flex: 0 1 calc(20% - 8px)
-这表示该项目的宽度不会超过宽度的20%(调整边距),并且可以根据容器的宽度缩小.参见下面的演示:
Use flex: 0 1 calc(20% - 8px)
- this means the item won't grow beyond 20% of width (adjusting for margin) and can shrink based on the container width. See demo below:
.container {
background: gray;
width: 600px;
height: 200px; /* height given for illustration */
display: flex;
flex-flow: row wrap;
position: relative;
}
.item {
background: blue;
margin: 4px;
flex: 0 1 calc(20% - 8px); /* <-- adjusting for margin */
}
<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>
另一种方法是 hacky -您可以将flex-grow
设置为一个,并使用flex: 1 1 calc(20% - 4px)
设置flex-basis: calc(20% - 4px)
,并使用伪元素来填充剩余空间:
Another approach is a bit hacky - you can keep flex-grow
set to one and flex-basis: calc(20% - 4px)
using flex: 1 1 calc(20% - 4px)
, and use a pseudo element that fills the remaining space:
.container {
background: gray;
width: 600px;
height: 200px; /* height given for illustration */
display: flex;
flex-flow: row wrap;
position: relative;
}
.item {
background: blue;
margin: 4px;
flex: 1 1 calc(20% - 8px); /* <-- adjusting for margin */
}
.container:after {
content: '';
display: block;
flex: 999; /* grow by a large number */
}
<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>
如果您没有每行 n个项目 的要求,则可以参考以下内容:
If you don't have the n item per row requirement then you can refer this:
如果一行中的项目少于5个,并且希望它们填充剩余空间,请使用flex: 1 1 calc(20% - 8px)
(请注意,此处flex-grow
设置为1,以便 flex项目在最后一行扩展以填充剩余空间):
If in a row you have less than 5 items and you want them to fill in the remaining space use flex: 1 1 calc(20% - 8px)
(note that flex-grow
is set to 1 here so that the flex items in the last rows expand to fill the remaining space):
.container {
background: gray;
width: 600px;
height: 200px; /* height given for illustration */
display: flex;
flex-flow: row wrap;
position: relative;
}
.item {
background: blue;
margin: 4px;
flex: 1 1 calc(20% - 8px); /* <-- adjusting for margin */
}
<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个项目,Flexbox中的项目会自动调整大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!