html - 为什么我的 flex-wrap 有很大的间隙，为什么它会将 flex-direction 更改为列？

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 元素太宽，无法均匀地放入容器中。尝试减小 flex-basis 值。