flexbox vertical align child top, center another

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>

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

您好！

Answer 1

不，不是真的，没有另一个包装器是 flex-container。

由于 flexbox 在一定程度上是基于操纵边距的，因此没有方法（AFAIK，虽然我很想知道是否有）到justify-content: center 然后 align-self 一个 child 元素到中心以外的其他地方。

我会选择这样的方法：向 "content" div 添加一个包装器，给它 flex:1 来填充 [=] 下面剩余的 space 40=]，然后用 justify-content:center.

制作包装器 display:flex

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

.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

Answer 2

Flexbox 开辟了各种机会，margin: auto;这就是其中之一。将 margin 设置为 auto 沿着弹性轴（在这种情况下是垂直的）将吸收任何额外的 space，然后 div 将其放在弹性项目之间。最后，可以在不创建 div soup 的情况下将内容垂直居中。

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

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

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

.content {
  margin-top: auto;
  margin-bottom: auto;
}

<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 vertical align child top, center another

flexbox vertical align child top, center another

css

vertical-alignment

flexbox