为什么弹性物品没有包装？

小编典典

为什么弹性物品没有包装？

css

我正在尝试制作多个具有相同高度的正方形行（每行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％宽度。

任何帮助深表感谢。

阅读 290

2020-05-16

共1个答案

小编典典

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: 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>

另外，默认情况下，所有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>

2020-05-16