Question

所以我尝试使用 flexbox 来均匀地放置其中的对象。问题是 flexbox 在元素底部增加了空间，但没有在顶部增加空间。

这是该部分的代码，其中的div是我希望在其中均匀分布的元素。

#Items {
    width: 100%;
    height: 800px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

}

#Items a {
    text-decoration: none;
}

/* Classes */

.Box {
    width: 320px;
    height: 100px;
    background-color: #f2f2f2;
}

.Box h3 {
    font-family: 'Roboto', serif;
    font-size: 22px;
    color: #111;
}

<section id="Items">
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
</section>

div 确实在带有 flexbox 的部分内均匀间隔，除了 flexbox 中第一个 div 的顶部和 flexbox 顶部之间没有空间，但最后一个 div 的底部之间有空间box 和 flexbox 的底部。有没有干净的方法来解决这个问题？我不想为我的第一个 div 框添加填充或边距，因为我想稍后将 div 框变成一个锚点（或链接），以便用户可以点击它并导航到网站的其他部分。

谢谢！

Answer 1

要垂直对齐项目，以便上下有均匀的边距，请使用

align-items: center;

#Items {
    width: 100%;
    height: 800px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    border: 1px solid black;
    align-items: center;
}

#Items a {
    text-decoration: none;
}

/* Classes */

.Box {
    width: 320px;
    height: 100px;
    background-color: #f2f2f2;
}

.Box h3 {
    font-family: 'Roboto', serif;
    font-size: 22px;
    color: #111;
}

<section id="Items">
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
</section>

Answer 2

您的弹性容器在 row 方向。

这意味着 justify-content: space-around 将填充水平边缘。

如果您想要垂直边缘的填充，请添加 align-content: space-around。

#Items {
  height: 800px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: space-around;  /* new */
}

#Items a {
  text-decoration: none;
}

/* Classes */

.Box {
  width: 320px;
  height: 100px;
  background-color: #f2f2f2;
}

.Box h3 {
  font-family: 'Roboto', serif;
  font-size: 22px;
  color: #111;
}

<section id="Items">
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
</section>

Answer 3

我认为您需要在该部分内的 div 内垂直居中（“h3”）！

如果我猜对了，那么您需要将以下内容添加到 ".Box" 中，这将使它们垂直对齐 display: flex; align-items: center;，如果您还需要水平对齐然后添加"justify-content: center;"

.Box {
    width: 320px;
    height: 100px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
}

Flexbox 不添加顶部填充而是添加底部填充

3 个答案: