为什么Flex项目不包装？ [英] Why are flex items not wrapping?

查看：95
本文介绍了为什么Flex项目不包装？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图制作多行相同高度的正方形（每行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.pngalt =image one/> < / div> < div> < img src =images / 2.pngalt =image two/> < / div> < div> < img src =images / 1.pngalt =image one/> < / div> < div> < img src =images / 2.pngalt =image two/> < / div> < div> < img src =images / 1.pngalt =image one/> < / div> < div> < img src =images / 2.pngalt =image two/> < / div>< / div>



显示所有框的页面，但它们都在一行上超过父div的100％宽度。



任何帮助都非常感谢。

解决方案

flex容器的初始值为 flex-wrap：nowrap 。



这意味着当你创建一个flex容器（通过应用 display：flex 或 display：inline-flex 到一个元素）所有子元素（flex项目）被限制在一行。



要启用flex项目-line flex容器），使用 flex-wrap：wrap 。





以下是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.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div>< / div>



请注意，只有一个flex属性已声明： display：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.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div>< / div>



要允许每行只允许三个项目，请使用 flex 属性：



 ＃list-wrapper {display：flex; flex-wrap：wrap; border：1px solid black;}＃list-wrapper div {margin：10px; flex：11 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.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div>< / div>



此外，所有flex项目的默认高度相等（ align-items：stretch ）。



 ＃list-wrapper {display：flex; flex-wrap：wrap; border：1px solid black;}＃list-wrapper div {margin：10px; flex：11 calc（33.33％-30px）; border：1px solid #ccc;背景颜色：lightgreen; text-align：center;}＃list-wrapper div img {height：150px; width：150px;}  

 < div id =list -wrapper> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div>< / div>



如果您恢复 flex-wrap：nowrap 并给容器一个高度：



 ＃list-wrapper {显示：flex; / * flex-wrap：wrap; * / border：1px solid black; height：600px;}＃list-wrapper div {margin：10px; flex：11 calc（33.33％-30px）; border：1px solid #ccc;背景颜色：lightgreen; text-align：center;}＃list-wrapper div img {height：150px; width：150px;}  

 < div id =list -wrapper> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div> < div>< img src =http://i.imgur.com/60PVLis.pngalt =>< / div>< / div>


I am attempting to make multiple rows of squares (3 per line) which have the same height.

I have written some HTML and CSS for this but the boxes all go on the same line.

Here's what I have so far:

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

When I load the page with this all boxes appear but they are all on one line going over the parent div's 100% width.

Any help is much appreciated.

解决方案

An initial value of a flex container is flex-wrap: nowrap.

This means that when you create a flex container (by applying display: flex or display: inline-flex to an element) all child elements (flex items) are confined to a single line.

To enable flex items to wrap (i.e., create a multi-line flex container), use flex-wrap: wrap.

Here are a few examples of how flex properties work:

A simple flex container with various flex items containing an image:

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

Note that only one flex property has been declared: display: flex. This establishes the flex container. The following behaviors are by default:

  • flex-wrap: nowrap
  • flex-direction: row
  • justify-content: flex-start

To allow the items to wrap, add 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>

To allow only three items per row, use the flex property:

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

Also, all flex items have equal height by default (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>

The stretch is more noticeable if you restore flex-wrap: nowrap and give the container a height:

#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项目不包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆