<div class="container">
  <div class="buttons">
        <button class="button" onclick="functionAuto()">auto</button>
    <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="box-content">
  <div class="one" style="background-color:#e76f51;">One</div>
  <div class="two" id="two" style="background-color:#e9c46a;">Three</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;
}

#box-content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  align-items: flex-start;
}

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

.two {
  align-self: center;
}

.buttons {
  margin-left:-120px;
  top:200px;
  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 functionAuto() {
  document.getElementById("two").style.alignSelf="auto" 
}
function functionStretch() {
  document.getElementById("two").style.alignSelf="stretch" 
}
function functionCenter() {
  document.getElementById("two").style.alignSelf="center" 
}
function functionFlexStart() {
  document.getElementById("two").style.alignSelf="flex-start" 
}
function functionFlexEnd() {
  document.getElementById("two").style.alignSelf="flex-end" 
}
function functionBaseline() {
  document.getElementById("two").style.alignSelf="baseline" 
}