<div class="container">
      <div class="buttons">
        <button class="button" onclick="functionStretch()">stretch</button>
    <button class="button" onclick="functionCenter()">center</button>
    <button class="button" onclick="functionFlexStart()">flex-start</button>
    <button class="button" onclick="functionFlexEnd()">flex-end</button>
    <button class="button" onclick="functionBaseline()">baseline</button>
  </div>
<div id="content">
  <div class="one" style="background-color:#e76f51;">One</div>
  <div class="two" style="background-color:#e9c46a;">Two</div>  
  <div class="three" style="background-color:#2a9d8f;">Third div with more content.</div>
</div>
</div>

body {
  height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
}

.container {
  position: relative;
  top:-100px;
}
#content {
  width: 200px;
  height: 200px;
  border: 3px solid #333; 
  display: flex;
  align-items: center;
}

.one, .two, .three{
   flex: 1;
}

.buttons {
  margin-left:-120px;
  top:180px;
  position: relative;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 100px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}

function functionCenter() {
  document.getElementById("content").style.alignItems="center" 
}
function functionFlexStart() {
  document.getElementById("content").style.alignItems="flex-start" 
}
function functionFlexEnd() {
  document.getElementById("content").style.alignItems="flex-end" 
}
function functionBaseline() {
  document.getElementById("content").style.alignItems="baseline" 
}
function functionStretch() {
  document.getElementById("content").style.alignItems="stretch" 
}