Html 为什么我的柔性缠绕有很大的间隙，为什么它会将柔性方向更改为柱形？

因此，在学习使用flex box时，我注意到我的flex wrap:wrap的位置非常奇怪，这取决于视点，它在盒子之间有很大的间隙

出于某种原因，

弹性方向

列为：

下面是代码：

.cont{
显示器：flex；
边框：紫色实心；
柔性包装：包装；
}
续{
填充：10px；
弹性基准：300px；
背景：线性梯度（45度，rgb（233，47，124），rgb（917592））；
}

方框4
知识是一种美德，是一种美德，是一种美德，是一种美德

方框5
知识是一种美德，是一种美德，是一种美德，是一种美德

方框6
知识是一种美德，是一种美德，是一种美德，是一种美德

框7
知识是一种美德，是一种美德，是一种美德，是一种美德

方框8
知识是一种美德，是一种美德，是一种美德，是一种美德

框9
知识是一种美德，是一种美德，是一种美德，是一种美德

框10
知识是一种美德，是一种美德，是一种美德，是一种美德

flex wrap

使得一行的溢出将被包装成一个新行。为什么它这么早就溢出，在右边留下一个很大的间隙，是因为flex项目太宽，无法均匀地装入容器中。尝试降低弹性基准值。

正如pfcodes所指出的，您的项目不适合该行，因此被包装。 此外，当使用<代码> Flex C包装时，应考虑<代码>对齐内容属性。可以将其视为包裹项目时交叉轴的对齐方式。在您的情况下，

flex direction

是

row

（默认值），

align content

将影响包装线的垂直对齐。默认情况下，它采用值

stretch

---

查看帮助工具，以更好地理解和测试

flexbox

，

flex wrap

属性指定是否应包装柔性项。在您的例子中，您已经给出了

flex-basis:300px

和

padding:10px

，因此每个框的宽度将是

flex-basis+padding left+padding right=300+10+10=320px

（因为您没有设置

框大小：边框框

宽度将包括填充）

在您的情况下，

div.cont

宽度不足以容纳三个盒子（

320*3=960px

）。所以你的盒子被包装到下一行。如果要在一行中显示三个框

.cont div{
  padding:10px;
  flex-basis:calc(100% - 20px);
}

---

代码的修改版本

第二行会出现额外的间距，因为您已设置了

justify content:space-between

。这里有一个非常宝贵的flexbox资源：@pfcodes感谢您的资源修复了错位，但异常的间距仍然存在，我将更新图片。另外，你知道为什么flex wrap会将flex方向更改为column吗？事实上，我发现问题是因为缺少flex grow属性，而你的资源帮助解决了这个问题。谢谢你的帮助！