html - 如何使用 flex 将 div 高度设置为其容器的 100% 并保持垂直对齐居中？

Question

我尝试使用 flexbox 将文本和按钮居中，并保持列相等。但是我很难将列高设置为其容器的 100%。当我将高度设置为 100% 时，它的垂直对齐方式不再位于中间。我不想使用表或 javascript 获得结果。

.container {
  display:flex;
  border-top: solid 1px;
  border-bottom: solid 1px;
  align-items: center;
  height:48px;
}
.column {
  flex-basis:100%;
  text-align:center;
}
.mid-col {
  border-left:solid 1px;
  border-right:solid 1px;
}

<div class="container">
  <div class="column">
    <div>50</div>
    <div>Following</div>
  </div>
  <div class="column mid-col">
    <div>50</div>
    <div>Followers</div>
  </div>
  <div class="column">
    <button>Follow</button>
  </div>  
</div>

JS fiddle :fiddle

Answer 1

如果你想让 column 获得 container 的 100% 高度，你必须使用嵌套的 flexbox - 添加这个:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

到 column 并从 container 中删除 align-items: center(这样默认的 align-items: stretch 可能会生效)。

(您现在无法为 column 设置 100% 高度，因为您已将 align-items: center 应用于您的 container)

请看下面的演示:

.container {
  display: flex;
  border-top: solid 1px;
  border-bottom: solid 1px;
  height: 48px;
}
.column {
  flex-basis: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mid-col {
  border-left: solid 1px;
  border-right: solid 1px;
}

<div class="container">
  <div class="column">
    <div>50</div>
    <div>Following</div>
  </div>
  <div class="column mid-col">
    <div>50</div>
    <div>Followers</div>
  </div>
  <div class="column">
    <button>Follow</button>
  </div>
</div>