FlexBox：每行4个项目
我正在使用一个flex框显示8个项目，这些项目将动态调整我的页面大小。如何强制它将项目拆分为两行？（每行4个）？
以下是相关片段：
（或者如果您更喜欢jsfiddle-http://jsfidle.net/vivmaha/oq6prk1p/2/)
null
.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>null
共有1个答案
容器上有flex-wrap:wrap。这很好，因为它覆盖了默认值，即nowrap(source)。这就是项目在某些情况下不进行包装以形成网格的原因。
在这种情况下，主要问题是flex项上的flex-grow:1。
flex-grow属性实际上并不调整flex项的大小。它的任务是在容器（源）中分配空闲空间。所以无论屏幕大小有多小，每个项目都会收到线上按比例分配的一部分空闲空间。
更具体地说，您的容器中有八个flex项。使用flex-grow:1，每一个都接收行上1/8的可用空间。由于项目中没有内容，它们可以收缩到零宽度，并且永远不会换行。
解决方法是在项上定义宽度。试试看：
null
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 0 21%; /* explanation below */
margin: 5px;
height: 100px;
background-color: blue;
}html lang-html prettyprint-override"><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>-
问题内容： 我正在使用一个伸缩框来显示8个项目，这些项目将随我的页面动态调整大小。如何强制将项目分成两行？（每行4个）？ 这是一个相关的片段： 问题答案： 您已经在容器上了。很好，因为它会覆盖默认值source。这是在某些情况下项目无法包装形成网格的原因。 在这种情况下，主要问题在于伸缩项目。 该属性实际上并没有设置弹性项目的大小。它的任务是在容器源中分配可用空间。因此，无论屏幕尺寸有多小，每一项
-
想象一下我有后续标记 和样式 由于某些原因，我无法更改的宽度，我是否可以通过对父容器进行样式化、使用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放在方框的右边。看起来总是这样： 这可能很容易解决，但我现在很困惑。（感谢您的帮助：）