Flexbox：每行4个项目
我正在使用一个伸缩框来显示8个项目，这些项目将随我的页面动态调整大小。如何强制将项目分成两行？（每行4个）？
这是一个相关的片段：
.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>
问题答案：
您已经flex-wrap: wrap在容器上了。很好，因为它会覆盖默认值nowrapsource。这是在某些情况下项目无法包装形成网格的原因。
在这种情况下，主要问题在于flex-grow: 1伸缩项目。
该flex-grow属性实际上并没有设置弹性项目的大小。它的任务是在容器源中分配可用空间。因此，无论屏幕尺寸有多小，每一项都会在行中获得一定比例的可用空间。
更具体地说，您的容器中有八个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-grow: 1定义，flex不需要为flex-basis25％，由于边距，实际上每行将导致三项。
由于flex-grow将消耗行上的可用空间，因此flex-basis只需要足够大即可执行换行。在这种情况下，使用flex-basis: 21%，有足够的空间留出边距，但没有足够的空间容纳第五个项目。
-
我正在使用一个flex框显示8个项目，这些项目将动态调整我的页面大小。如何强制它将项目拆分为两行？（每行4个）？ 以下是相关片段： （或者如果您更喜欢jsfiddle-http://jsfidle.net/vivmaha/oq6prk1p/2/) null null
-
想象一下我有后续标记 和样式 由于某些原因，我无法更改的宽度，我是否可以通过对父容器进行样式化、使用flexbox或任何其他方式在每行中排列两个项目？
-
问题内容： 我现在有这个： 我想做的是在flexbox中每行有5个项目。目前，它们没有显示是因为它们没有设置宽度/高度，这使我想到了下一个问题。是否可以自动调整项目的大小，以便每行容纳5个项目？ 我该怎么做？ 谢谢！ 问题答案： 您给出的a是正确的，但是您必须调整每个 flex项目 上的4px边距以使其正确 包装 。 最后一行的等宽Flex项目 用途-这表示商品的宽度不会超过宽度的20％（调整边距
-
问题内容： 我遇到了我认为应该是一个非常简单的问题。 我需要将arrayList中的每个项目与列表中的其他所有项目进行比较，而无需将项目与其自身进行比较。它不像调用equals（）比较那样简单，它涉及一些自定义逻辑，我在下面的代码中省略了这些自定义逻辑。而且，ArrayList不应以任何方式更改。 我似乎遇到的问题是，一旦进入第二个循环，我就不知道是否有另一个对象要与之比较（因为它是一个可变大小的
-
问题内容： 是否可以使两个项目与flexbox左对齐，而使一个项目与flexbox右对齐？该链接显示得更清楚。最后一个例子是我想要实现的。 在flexbox中，我有一块代码。使用float时，我有四个代码块。这就是为什么我更喜欢flexbox的原因之一。 HTML CSS 问题答案： 要将一个flex子项向右对齐，请设置为 从flex规范： 主轴上自动边距的一种用法是将弹性项目分成不同的“组”。下
-
我有一个简单的问题：我想把一个文本和一个图像放在一行。我试过用display flex，但它总是调整图像的大小，这不是我想要的。 这是我的html代码： 这是我的CSS： 我还想把关闭的imgage放在方框的右边。看起来总是这样： 这可能很容易解决，但我现在很困惑。（感谢您的帮助：）