为什么弹性物品没有包装？
我正在尝试制作多个具有相同高度的正方形行（每行3个）。
我为此编写了一些HTML和CSS，但所有框都在同一行上。
这是我到目前为止的内容：
#list-wrapper {
display: flex;
width: 100%;
}
#list-wrapper div {
width: 33.33%;
}
#list-wrapper div img {
flex: 1;
}
<div id="list-wrapper">
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
</div>
当我用此页面加载页面时，所有框都出现了，但它们都在一行上，超过了父div的100％宽度。
任何帮助深表感谢。
问题答案：
flex容器的初始设置为 flex-wrap: nowrap 。
这意味着，当您创建一个伸缩容器（通过应用元素display: flex或display: inline- flex将其应用于元素）时，所有子元素（“伸缩项”）都限于一行。
使flex项可以包装使用flex-wrap: wrap。
以下是一些有关flex属性如何工作的示例：
一个简单的flex容器，其中包含包含图像的各种flex项目：
#list-wrapper {
display: flex;
border: 1px solid black;
}
#list-wrapper div {}
#list-wrapper div img {
height: 150px;
width: 150px;
}
<div id="list-wrapper">
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>
请注意，仅声明了一个flex属性：display: flex。这将建立flex容器。默认情况下，以下行为：
flex-wrap: nowrapflex-direction: rowjustify-content: flex-start
要包装物品，请添加flex-wrap: wrap：
#list-wrapper {
display: flex;
flex-wrap: wrap; /* NEW */
border: 1px solid black;
}
#list-wrapper div { }
#list-wrapper div img {
height: 150px;
width: 150px;
}
<div id="list-wrapper">
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>
要每行仅允许三个项目，请使用flex属性：
#list-wrapper {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
}
#list-wrapper div {
margin: 10px;
flex: 1 1 calc(33.33% - 20px); /* flex-grow, flex-shrink,
flex-basis: (width - margin) */
}
#list-wrapper div img {
height: 150px;
width: 150px;
}
<div id="list-wrapper">
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>
另外，默认情况下，所有flex项目的高度都相等（align-items: stretch）。
#list-wrapper {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
}
#list-wrapper div {
margin: 10px;
flex: 1 1 calc(33.33% - 30px);
border: 1px solid #ccc;
background-color: lightgreen;
text-align: center;
}
#list-wrapper div img {
height: 150px;
width: 150px;
}
<div id="list-wrapper">
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>
如果恢复flex-wrap: nowrap并给容器指定高度，则拉伸会更明显：
#list-wrapper {
display: flex;
/* flex-wrap: wrap; */
border: 1px solid black;
height: 600px;
}
#list-wrapper div {
margin: 10px;
flex: 1 1 calc(33.33% - 30px);
border: 1px solid #ccc;
background-color: lightgreen;
text-align: center;
}
#list-wrapper div img {
height: 150px;
width: 150px;
}
<div id="list-wrapper">
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>
-
问题内容： 我有一个flex项目，它也是一个flex容器，问题是即使添加了，它的flex项目也拒绝包装。 谁能为我解决这个问题，或指出我做错了什么。 问题答案： 嵌套容器中的伸缩项目按 百分比 调整大小。 由于百分比长度基于父级的长度，因此 没有理由进行包装 。它们将始终是父级的40％，即使父级的宽度为1％。 如果您使用其他长度单位，例如或，它们将自动换行。
-
问题内容： 我有一个伸缩框（请参见下面的示例片段）。 我想进行设置，以便在所有情况下，都位于 弹性框 的中心，其他跨度将根据其标记在其周围流动。 我基本上是在寻找CSS代码，但在寻找主轴，而不是在交叉轴这可能有助于解释我的要求）。 我也正在申请我的，这是我在阅读本文后了解到的（很棒的页面，但仍然让我提出以下问题-除非我不完全理解所有问题）。 这是我得到的代码： 为了充分重申我的问题：我想知道如何中
-
问题内容： 我正在尝试制作多个具有相同高度的正方形行（每行3个）。 我为此编写了一些HTML和CSS，但所有框都在同一行上。 这是我到目前为止的内容： 当我用此页面加载页面时，所有框都出现了，但是它们都在一行上，超过了父div的100％宽度。 任何帮助深表感谢。 问题答案： flex容器的初始设置为 。 这意味着，当您创建一个伸缩容器（通过应用元素或将其应用于元素）时，所有子元素（“伸缩项”）都限
-
问题内容： 样品： 我有两个问题，请： 为什么基本上会发生这种情况？ 什么是正确的方法，以防止其拉伸而不影响flex容器中的其他flex项目？ 问题答案： 您不想拉伸高度跨度吗？ 您可能会影响一个或多个弹性项目，而不会拉伸容器的整个高度。 要影响容器的所有弹性项目，请选择以下选项： 您必须设置为，并且该容器的所有弹性项目都将获得其内容的高度。 要仅影响单个flex-item，请选择以下选项： 如果
-
问题内容： 我正在寻找最简单的方法斑马条纹以下响应式弹性框表上的行。 换句话说，在此示例中，第2行和第4行是无限的，我不知道会有多少行，因为这是CMS系统中可重用的组件。 HTML不能更改，但是行和列的数量会经常更改。我很乐意为列而不是行设置限制。 有没有办法在纯CSS中做到这一点？ 问题答案： 理想情况下，所需的选择器将定位属性中包含的偶数值。像这样： 基本上，该幻想选择器说： 使用 包含 （）
-
我的Flex项目有问题我尝试创建相同高度的Flex容器，但它不起作用，现在有人知道我尝试使用Flex:1和其他属性时会出现什么问题，但它不起作用这里是我的示例代码： 样本布局