我使用一个伸缩框来显示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>
你有弹性包装:包裹在容器上。这很好，因为它覆盖了默认值nowrap (source)。这就是为什么在某些情况下，物品不会被包装成网格的原因。
在这种情况下，主要问题是伸缩项目上的flex-grow: 1。
flex-grow属性实际上并不调整伸缩项的大小。它的任务是在容器(源)中分配空闲空间。所以不管屏幕大小有多小，每个项目都将获得相应比例的在线空闲空间。
更具体地说，容器中有8个伸缩项。使用flex-grow: 1，每一个都接收一行上1/8的空闲空间。因为你的项目中没有内容，它们可以收缩到零宽度，永远不会自动换行。
解决方案是在项目上定义宽度。试试这个:
.parent {
显示:flex;
flex-wrap:包装;
｝
.child {
Flex: 10 21%;*/下面的/*解释
保证金:5 px;
身高:100 px;
背景颜色:蓝色;
｝
< div class = "父" >
< div class = "孩子" > < / div >
< div class = "孩子" > < / div >
< div class = "孩子" > < / div >
< div class = "孩子" > < / div >
< div class = "孩子" > < / div >
< div class = "孩子" > < / div >
< div class = "孩子" > < / div >
< div class = "孩子" > < / div >
< / div >
使用flex简写中定义的flex-grow: 1，就不需要flex- base为25%，这实际上会导致每行有3个项。
由于flex-grow会消耗行上的空闲空间，因此flex-basis只需要足够大就可以强制换行。在这种情况下，如果采用21%的弹性计价制，就会有足够的空间放置页边距，但永远没有足够的空间放置第五项。
我会这样做，使用负边缘和calc水沟:
.parent {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
margin-left: -10px;
}
.child {
width: calc(25% - 10px);
margin-left: 10px;
margin-top: 10px;
}
演示:https://jsfiddle.net/9j2rvom4/
替代CSS网格方法:
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
演示:https://jsfiddle.net/jc2utfs3/
弹性包装+负边际
为什么flex vs. display: inline-block?
Flex在元素大小方面提供了更大的灵活性
内置白间距折叠(见3个内联块div，正好33%的宽度不适合父)
为什么是负边际?
对于边缘情况(即列中的第一个元素)，您可以使用SCSS或CSS-in-JS，或者设置一个默认的边距，然后去掉外部边距。
实现
https://codepen.io/zurfyx/pen/BaBWpja
<div class="outerContainer">
<div class="container">
<div class="elementContainer">
<div class="element">
</div>
</div>
...
</div>
</div>
:root {
--columns: 2;
--betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}
.outerContainer {
overflow: hidden; /* Hide the negative margin */
}
.container {
background-color: grey;
display: flex;
flex-wrap: wrap;
margin: calc(-1 * var(--betweenColumns));
}
.elementContainer {
display: flex; /* To prevent margin collapsing */
width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
margin: var(--betweenColumns);
}
.element {
display: flex;
border: 1px solid red;
background-color: yellow;
width: 100%;
height: 42px;
}
