Flexbox:每行4个项目
我正在使用一个弹性框来显示8个项目，这些项目将随着我的页面动态调整大小。如何强制它将项目拆分为两行？(每行4个)？
这里有一个相关的片段：
(或者如果您更喜欢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>
回答 6
Stack Overflow用户
发布于 2017-07-29 09:39:28
容器上有flex-wrap: wrap。这很好，因为它覆盖了默认值nowrap (source)。这就是项目不能在some cases中换行以形成网格的原因。
在本例中，主要问题是flex项上的flex-grow: 1。
flex-grow属性并不实际调整flex项的大小。它的任务是分配容器中的空闲空间(source)。因此，无论屏幕尺寸有多小，每一项都将按比例获得行上可用空间的一部分。
更具体地说，您的容器中有8个flex项。使用flex-grow: 1，每个线程都会收到线路上1/8的空闲空间。由于您的项目中没有内容，因此它们可以缩小到零宽度，并且永远不会换行。
解决方案是在项目上定义宽度。试试这个：
.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>
有了flex速记中定义的flex-grow: 1，flex-basis不需要是25%，这实际上会导致每行有三个项目，因为边距。
由于flex-grow将消耗行上的空闲空间，因此flex-basis只需要足够大就可以强制执行换行。在这种情况下，对于flex-basis: 21%，有足够的空间来放置页边距，但永远不会有足够的空间来放置第五项。
Stack Overflow用户
发布于 2017-07-14 06:36:48
这是另一个apporach。
你也可以用这种方式来完成：
.parent{
display: flex;
flex-wrap: wrap;
}
.child{
width: 25%;
box-sizing: border-box;
}示例：https://codepen.io/capynet/pen/WOPBBm
和一个更完整的示例：https://codepen.io/capynet/pen/JyYaba
Stack Overflow用户
发布于 2017-08-16 18:40:38
有关更多详细信息，请访问此Link
.parent{
display: flex;
flex-wrap: wrap;
}
.parent .child{
flex: 1 1 25%;
/*Start Run Code Snippet output CSS*/
padding: 5px;
box-sizing: border-box;
text-align: center;
border: 1px solid #000;
/*End Run Code Snippet output CSS*/
}<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
https://stackoverflow.com/questions/29546550
复制相似问题