Flex left, center and right

flex_align.html

<!--
Live code:
https://codepen.io/anon/pen/zQYdob?editors=1100
-->

<style>
.diagram {
  width: 21em;
}
.diagram-title {
  padding: 0.5em 0.5em;
  text-align: center;
  color: #ffffff;
  background-color: #20a8d8;
  border-top-left-radius: 0.1em;
  border-top-right-radius: 0.1em;
  
}

.diagram-title_text {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 20em;
  display: flex;
}

.diagram-title_text > .left-block {
  flex: 1;          
  display: flex;
  justify-content: flex-start;
  visibility: hidden;
}

.diagram-title_text > .center-block {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.diagram-title_text > .right-block {
  flex: 1;
  display: flex;
  justify-content: flex-end;
} 
</style>


<div class="diagram">
  <div class="diagram-title">
    <div class="diagram-title_text">
      <!-- left -->
      <div class="left-block"></div>
      <!-- center -->
      <div class="center-block"> <span>Title</span> </div>
      <!-- right -->
      <div class="right-block"> <button>E</button> <button>D</button> </div>
    </div>
  </div>
</div>