为什么我的flex-wrap会有很大的空隙，为什么它将flex-方向更改为列？

Question

因此，在学习使用flex-box时，我注意到 flex-wrap：wrap 的位置确实很奇怪，具体取决于视点，盒子之间的间隙很大。

出于某种原因，flex-direction是列：

这也是代码：

.cont {
  display: flex;
  border: purple solid;
  flex-wrap: wrap;
}

.cont div {
  padding: 10px;
  flex-basis: 300px;
  background: linear-gradient(45deg, rgb(233, 47, 124), rgb(9, 175, 92));
}

<div class="cont">
  <div class="box4">
    <h1>Box4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box5">
    <h1>Box5</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box6">
    <h1>Box6</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box7">
    <h1>Box7</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box8">
    <h1>Box8</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box9">
    <h1>Box9</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box10">
    <h1>Box10</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Answer 1

flex-wrap使得一行的溢出将包装到新的一行。它这么早溢出的原因是在右边留下了很大的空白，这是因为柔性物品太宽而无法均匀地放入容器中。尝试减小flex-basis的值。

Answer 2

如pfcodes所指出的，您的项目只是不适合该行而已被包装。 此外，在使用flex-wrap时，应考虑align-content属性。您可以将其视为物品包装时横轴的对齐方式。在您的情况下，由于flex direction为row（默认设置），因此align-content将影响换行的垂直对齐方式。默认情况下，其值为stretch。

看看this辅助工具，以更好地了解和测试flexbox。

Answer 3

flex-wrap属性指定是否应包装柔性物品。在您的情况下，您已指定了flex-basis:300px和padding:10px，因此每个框的宽度将为flex-basis + padding-left + padding-right = 300+10+10 = 320px（因为您未设置box-sizing:border-box填充将包括在宽度中）。 / p>

对于您来说，div.cont的宽度不足以让三个盒子（320*3=960px）放在那儿。这样，您的盒子就被包裹到了下一行。如果要连续显示三个框。

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

您的代码http://jsbin.com/luqevob/1/的修改版本