Align divs vertically using flexbox

Question

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/

Answer 1

You are missing the flex-direction:column attribute of flex.

By default any flex container has a flex-direction: row & that is the reason its moving horizontally & not vertically. You need to specify this explicitly.

Here is more about it

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

Updated the Fiddle.