使用flexbox垂直对齐div(Align divs vertically using flexbox)

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

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

我究竟做错了什么？

.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/ 
I'm trying to align three div blocks vertically using flexbox.
 
I can get them horizontally aligned correctly, however not vertically.
 
What am I doing wrong?
 
 
 
  
  
.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> 
  
 
 
Here is a fiddle: https://jsfiddle.net/zqc1qfk1/1/
                
最满意答案
                
                    
                        
 只需启用容器上的wrap并为每个弹性项目指定width: 100% ： 
 
.banner-align {
  display: flex;
  flex-wrap: wrap;
}

.banner-align > * {
   flex: 0 0 100%;
 }
 
 现在每个flex项消耗行中的所有空间，强制其他元素创建新行。 
 
 修改小提琴 
Simply enable wrap on the container and give each flex item a width: 100%:
 
.banner-align {
  display: flex;
  flex-wrap: wrap;
}

.banner-align > * {
   flex: 0 0 100%;
 }
 
Now each flex item consumes all the space in the row, forcing other elements to create new rows.
 
revised fiddle