Question

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

align-content:centre

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

我做错了什么？

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

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

有两个原因：

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

revised demo

有关更详细的说明，请参阅：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

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

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

2 个答案: