使用flexbox垂直对齐div

Question

我正在尝试div使用flexbox垂直对齐三个块.

我可以让它们水平对齐,但不能垂直对齐.

我究竟做错了什么？

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

这是一个小提琴:https://jsfiddle.net/zqc1qfk1/1/

Answer 1

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

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

这里有更多关于它

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

更新了小提琴。

Answer 2

wrap只需在容器上启用并为每个弹性项目指定一个width: 100%：

.banner-align {
  display: flex;
  flex-wrap: wrap;
}

.banner-align > * {
   flex: 0 0 100%;
 }

现在，每个弹性项目都会占用行中的所有空间，迫使其他元素创建新行。

修改后的小提琴