Flexbox:每行 4 个项目 [英] Flexbox: 4 items per row
问题描述
我正在使用弹性框来显示 8 个项目，这些项目将随着我的页面动态调整大小.如何强制它将项目分成两行?(每行 4 个)?
这是一个相关的片段:
(或者，如果您更喜欢 jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)
.parent-wrapper {高度:100%；宽度:100%；边框:1px纯黑色；}.父母{显示:弹性；字体大小:0；flex-wrap: 包裹;边距:-10px 0 0 -10px;}.孩子 {显示:内联块；背景:蓝色；边距:10px 0 0 10px；弹性增长:1；高度:100px；}<div class="parent-wrapper"><div class="parent"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>您已经在容器上安装了 flex-wrap: wrap.这很好，因为它覆盖了默认值，即 nowrap (来源).这就是在某些情况中项目不会环绕形成网格的原因.
在这种情况下，主要问题是弹性项目上的 flex-grow: 1.
flex-grow 属性实际上并不调整弹性项目的大小.它的任务是分配容器中的可用空间(source).因此无论屏幕尺寸有多小，每个项目都会获得在线上的可用空间的比例部分.
更具体地说，您的容器中有八个弹性项目.使用flex-grow: 1，每个人获得1/8 的可用空间.由于您的项目中没有内容，它们可以缩小到零宽度并且永远不会换行.
解决方案是在项目上定义宽度.试试这个:
.parent {显示:弹性；flex-wrap: 包裹;}.孩子 {弹性:1 0 21%；/* 下面解释 */边距:5px；高度:100px；背景颜色:蓝色；}<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>在 flex 简写中定义了 flex-grow: 1 后，flex-basis 不需要为 25%，这将由于边距，实际上每行会产生三个项目.
由于 flex-grow 会消耗行上的可用空间，flex-basis 只需要大到足以强制换行.在这种情况下，使用 flex-basis: 21%，边距有足够的空间，但对于第五个项目的空间永远不够.
I'm using a flex box to display 8 items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?
Here is a relevant snip:
(Or if you prefer jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 10px;
flex-grow: 1;
height: 100px;
}
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
You've got flex-wrap: wrap on the container. That's good, because it overrides the default value, which is nowrap (source). This is the reason items don't wrap to form a grid in some cases.
In this case, the main problem is flex-grow: 1 on the flex items.
The flex-grow property doesn't actually size flex items. Its task is to distribute free space in the container (source). So no matter how small the screen size, each item will receive a proportional part of the free space on the line.
More specifically, there are eight flex items in your container. With flex-grow: 1, each one receives 1/8 of the free space on the line. Since there's no content in your items, they can shrink to zero width and will never wrap.
The solution is to define a width on the items. Try this:
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 0 21%; /* explanation below */
margin: 5px;
height: 100px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
With flex-grow: 1 defined in the flex shorthand, there's no need for flex-basis to be 25%, which would actually result in three items per row due to the margins.
Since flex-grow will consume free space on the row, flex-basis only needs to be large enough to enforce a wrap. In this case, with flex-basis: 21%, there's plenty of space for the margins, but never enough space for a fifth item.
这篇关于Flexbox:每行 4 个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
