为什么弹性项目不包装？
我正在尝试制作多个具有相同高度的正方形行（每行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-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>
-
问题内容： 我正在尝试制作多个具有相同高度的正方形行（每行3个）。 我为此编写了一些HTML和CSS，但所有框都在同一行上。 这是我到目前为止的内容： 当我用此页面加载页面时，所有框都出现了，但它们都在一行上，超过了父div的100％宽度。 任何帮助深表感谢。 问题答案： flex容器的初始设置为 。 这意味着，当您创建一个伸缩容器（通过应用元素或将其应用于元素）时，所有子元素（“伸缩项”）都限于
-
问题内容： 我有4个flexbox列，并且一切正常，但是当我向列中添加一些文本并将其设置为大字体时，由于flex属性，它使列变宽了。 我尝试使用它并对其有所帮助，但是当我将列的大小调整为非常小的宽度时，仍然将文本中的字母分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。 （开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3
-
问题内容： 我有一个flex项目，它也是一个flex容器，问题是即使添加了，它的flex项目也拒绝包装。 谁能为我解决这个问题，或指出我做错了什么。 问题答案： 嵌套容器中的伸缩项目按 百分比 调整大小。 由于百分比长度基于父级的长度，因此 没有理由进行包装 。它们将始终是父级的40％，即使父级的宽度为1％。 如果您使用其他长度单位，例如或，它们将自动换行。
-
问题内容： 我尝试使用和设置元素的样式。 然而，它没有工作：表现得像，并表现得像个。 在Firefox和Chrome上都会发生这种情况，但奇怪的是，它在IE上有效。 是虫子吗？在HTML5和CSS Flexible Box Layout规范中，我都找不到应该有的特殊行为。 问题答案： 根据错误984869- 对按钮元素不起作用， 不能在纯CSS中实现（由浏览器实现），因此从CSS的角度来看，它们有
-
问题内容： 我想展示水平系列的未知数量的纸牌。为此，如果太多，它们将必须重叠。我很难说服伸缩盒在不缩小卡片的情况下重叠卡片。下面的示例缩小卡片。我尝试过，但后来没有受到尊重。 问题答案： 这就是我使用flexbox做到的方式。 请注意，从技术上讲，卡并不是重叠的，它们只是被剪裁了。但是它们 看起来 像是重叠的。诀窍是将每张卡包裹在另一个带有溢出的元素中：隐藏。 包装元素将缩小以适应可用空间，并且在
-
我在一个项目中工作，然后创建了一个新项目，在打开旧项目后，它不被识别为java项目。没有在包中创建类的选项（如您在pic上所见），空的中间包不会隐藏，但该选项被设置为on。 为什么intelij-idea不认可java项目？