如何删除 flexbox 垂直居中行之间的 space？

Question

我有两行，顶行有一个标题，底行有 2 列，所有列都在全屏换行中垂直居中。出于某种原因，我无法摆脱全屏环绕在两行之间添加的额外垂直 space，尽管添加了：

align-content:centre

以及 display: flex 到两个 parent div（.wrap 和 .row）

我做错了什么？

jsfiddle: https://jsfiddle.net/ar4Ltoke/2/

.wrap {
  width: 1280px;
  min-height: 100vh;
  border-style: solid;
}

.row {
  width: 100%;
  align-items: flex-start;
  margin: auto;
  border: 1;
  border-style: solid;
}

.column_left {
  flex-basis: 60%;
  border: 1;
}

.column_right {
  flex-basis: 30%;
}

@media (min-width:640px) {
  .row {
    display: flex;
    justify-content: space-between;
  }
  .wrap {
    display: flex;
    align-content: center;
    flex-direction: column;
  }
}

<div class="wrap">
  <div class="row">
    <p class="blue">About me</p>
  </div>
  <div class="row">
    <div class="column_left">
      <p class="leadpara">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus
        commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi
        erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      </p>
    </div>
    <div class="column_right">
      <p class="leadpara">
        Email
        <br> Add me on Linkedin
        <br> Tweet at @fsd
      </p>
    </div>
  </div>
</div>

Answer 1

因为您正在使用 <br> 更改行，因此使用其他内容更改行会创建额外的空格。如果你想用 list-style-type as none 逐点显示它们，你可以使用列表代替。如果我的回答不清楚，请告诉我。如果需要我会发送代码。

Answer 2

两个原因：

您在 .row 上有 margin: auto。这导致两个 .row 弹性项目在容器中平均分布 space，这迫使它们分开。
.wrap 元素是一个列方向的弹性容器。这意味着主轴是垂直的。因此，您需要 justify-content 使行垂直居中。

revised demo

更详细的解释见：

如何删除 flexbox 垂直居中行之间的 space？

How do I remove space between flexbox vertically centred rows?

html

css

vertical-alignment

flexbox