html - 使用 flexbox 垂直对齐 div

Question

我正在尝试使用 flexbox 垂直对齐三个 div block 。

我可以让它们水平对齐，但不能垂直对齐。

我做错了什么？

.banner {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #01b9d5;
  color: white;
  height: 55px;
}
.banner-align {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid green;
}
.banner-hero {
  flex: 1;
  align-self: center;
  max-width: 50%;
  border: 1px solid red;
  text-align: center;
  display: inline-block;
}
.banner-left {
  align-self: flex-start;
  flex: 1;
  border: 1px solid green;
  display: inline-block;
}
.banner-right {
  align-self: flex-end;
  flex: 1;
  text-align: right;
  border: 1px solid yellow;
  display: inline-block;
}

<div class="banner">
  <div class="container banner-align">
    <div class="banner-left">
      Left Block
    </div>
    <div class="banner-hero">
      <b>Title</b>
    </div>
    <div class="banner-right">
      Right block
    </div>
  </div>
</div>

这是一个 fiddle :https://jsfiddle.net/zqc1qfk1/1/

Answer 1

您缺少 flex 的 flex-direction:column 属性。

默认情况下，任何 flex 容器都有一个 flex-direction: row & 这就是它水平移动而不是垂直移动的原因。您需要明确指定。

Here is more about it

.banner-align {
  display: flex;
  align-items: center;
  justify-content: center;
  border:1px solid green;
  flex-direction: column;
}

更新了 Fiddle .