flexbox垂直对齐儿童顶部，中心另一个 [英] flexbox vertical align child top, center another

问题描述

我有以下标记：

.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以在框的其余部分中心。

Unfortunatly the second header isn't align vertically to the top. Is there a way to archive this with flexbox? I need the ".header" to be aligned the the top and the ".content" to be centered within the rest of the box.

问候！

推荐答案

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

No, not really, not without another wrapper which is a flex-container.

由于flexbox是在一定程度上基于操作边界，没有方法（AFAIK，虽然我有兴趣了解是否有） justify -content：center ，然后 align-self 将子元素添加到除center以外的其他位置。

As flexbox is, to a certain extent based on manipulting margins, there is no method (AFAIK, although I'd be interested to find out if there is) to justify-content: center and then align-self a child element to somewhere else other than center.

我会这样做：添加一个包装到contentdiv，给它 flex：1 来填充标题下面的剩余空间，然后使用 justify-content：center 显示： display：flex 。

I'd go with something like this: Add a wrapper to the "content" div, give it flex:1 to fill the remaining space below the header, then make that wrapper display:flex with justify-content:center.

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

This seems to be the most logical method

.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演示

这篇关于flexbox垂直对齐儿童顶部，中心另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！