css - flexbox 垂直对齐子项顶部，居中另一个

Question

我有以下标记:

.row {
  display: flex;
  align-items: stretch;
  
  margin: -16px;
  background: #ddd;
}

.row .col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  flex: 1;
  
  margin: 16px;
  background: #fff;
}

.header, .content, .footer {
  padding: 16px;
  
  background: red;
}

<div class="row">
    <div class="col">
        <div class="header">Header #1</div>
        <div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
        <div class="footer">Footer</div>
    </div>

    <div class="col">
        <div class="header">Header #2</div>
        <div class="content">Lorem Ipsum<br />Dolor</div>
    </div>
</div>

不幸的是，第二个标题没有垂直对齐到顶部。有没有办法用 flexbox 归档这个？我需要“.header”与顶部对齐，“.content”在框的其余部分居中。

您好!

Answer 1

不，不是真的，不是没有另一个包装器，它是一个 flex 容器。

由于 flexbox 在一定程度上是基于操纵边距的，所以没有方法(据我所知，尽管我很想知道是否有)justify-content : center 然后 align-self 一个子元素到中心以外的其他地方。

我会采用这样的方式:向“content”div 添加一个包装器，为其提供 flex:1 以填充标题下方的剩余空间，然后制作该包装器 display:flex 与 justify-content:center。

这似乎是最合乎逻辑的方法

.col {
  height: 150px;
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
}
.header {
  background: lightblue;
}
.content {
  background: orange;
}
.flexy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: plum;
}

<div class="col">
  <div class="header">Header #2</div>
  <div class="flexy">
    <div class="content">Lorem Ipsum
      <br />Dolor</div>
  </div>
</div>

Codepen Demo