为什么柔性物品不包裹？

Question

我试图制作多行正方形(每行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%宽度.

任何帮助深表感谢.

Answer 1

Flex容器的初始设置是flex-wrap: nowrap.

这意味着当您创建Flex容器(通过应用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: nowrap
• flex-direction: row
• justify-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>

此外,默认情况下,所有弹性项目的高度相同(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>

Answer 2

如果您使用的是flexbox并希望包装内容,则必须指定flex-wrap: wrap.默认情况下,flex项不会换行.

你的代码在这里什么都不做,因为父代#list-wrapper div img不是display: flex.您需要将其移至#list-wrapper div:

#list-wrapper div img {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

要使图像为三对,您应该指定flex-basis: 33.33333%.

将您的CSS更改为此,它将起作用:

#list-wrapper {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

#list-wrapper div {
    flex: 0 0 33.333%;
}

JS小提琴:https://jsfiddle.net/f47prnnt/1/