首页
前端开发
为什么弹性项目不包装?

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

查看：32 发布时间：2021/12/1 13:21:13 html css flexbox

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

问题描述

我正在尝试制作具有相同高度的多行正方形(每行 3 个).

我为此编写了一些 HTML 和 CSS，但这些框都在同一行上.

这是我目前所拥有的:

#list-wrapper {显示:弹性；宽度:100%；}#list-wrapper div {宽度:33.33%；}#list-wrapper div img {弹性:1；}


<div><img src="images/1.png" alt="图像一"/>
<div><img src="images/2.png" alt="图片二"/>

<div><img src="images/1.png" alt="图像一"/>

<div><img src="images/2.png" alt="图片二"/>

<div><img src="images/1.png" alt="图像一"/>

<div><img src="images/2.png" alt="图片二"/>

当我用这个加载页面时，所有框都会出现，但它们都在一行上，超过父 div 的 100% 宽度.

非常感谢任何帮助.

解决方案

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

这意味着当你创建一个 flex 容器时(通过将 display: flex 或 display: inline-flex 应用到一个元素)所有子元素(flex items") 仅限于一行.

要使 flex 项目能够包装使用 flex-wrap: wrap.

<小时>

以下是 flex 属性如何工作的几个示例:

一个简单的 flex 容器，其中包含包含图像的各种 flex 项:

#list-wrapper {显示:弹性；边框:1px纯黑色；}#list-wrapper div {}#list-wrapper div img {高度:150px；宽度:150px；}


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

请注意，仅声明了一个 flex 属性:display: flex.这将建立弹性容器.以下行为是默认的:

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

要允许项目包装，添加 flex-wrap: wrap:

#list-wrapper {显示:弹性；flex-wrap: 包裹;/* 新的 */边框:1px纯黑色；}#list-wrapper div { }#list-wrapper div img {高度:150px；宽度:150px；}


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

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

#list-wrapper {显示:弹性；flex-wrap: 包裹;边框:1px纯黑色；}#list-wrapper div {边距:10px；flex: 1 1 calc(33.33% - 20px);/* 弹性增长，弹性收缩，弹性基础:(宽度 - 边距)*/}#list-wrapper div img {高度:150px；宽度:150px；}


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

此外，默认情况下所有 flex 项目都具有相同的高度(<代码>对齐项目:拉伸).

#list-wrapper {显示:弹性；flex-wrap: 包裹;边框:1px纯黑色；}#list-wrapper div {边距:10px；flex: 1 1 calc(33.33% - 30px);边框:1px 实心 #ccc；背景颜色:浅绿色；文本对齐:居中；}#list-wrapper div img {高度:150px；宽度:150px；}


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

如果你恢复 flex-wrap: nowrap 并给容器一个高度，拉伸会更明显:

#list-wrapper {显示:弹性；/* flex-wrap: 包裹;*/边框:1px纯黑色；高度:600px；}#list-wrapper div {边距:10px；flex: 1 1 calc(33.33% - 30px);边框:1px 实心 #ccc；背景颜色:浅绿色；文本对齐:居中；}#list-wrapper div img {高度:150px；宽度:150px；}


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

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

这篇关于为什么弹性项目不包装?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

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

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭