<div class="container">
    <div class="buttons">
        <button class="button" onclick="functionFlexStart()">flex-start</button>
    <button class="button" onclick="functionFlexEnd()">flex-end</button>
    <button class="button" onclick="functionCenter()">center</button>
    <button class="button" onclick="functionSpaceBetween()">space-between</button>
    <button class="button" onclick="functionSpaceAround()">space-around</button>
    <button class="button" onclick="functionSpaceEvenly()">space-evenly</button>
  </div>
  <div id="content">
  <div class="one" style="background-color:#e76f51;">1</div>
  <div class="two" style="background-color:#e9c46a;">2</div>
  <div class="three" style="background-color:#2a9d8f;">3</div>
</div>
  <div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p></div>
</div>

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

.container {
  position: relative;
  top:-50px;
  left:0;
}

#content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  justify-content: center;
}

.one, .two, .three {
  width: 40px;
  height: 40px;
}

.buttons {
  margin-left:-120px;
  top:215px;
  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;
}

.col {
  position: relative;
  font-weight: bold;
  font-size:15px;
  width: 100%;
  left:250px;
  top:-200px;
}

function functionFlexStart() {
  document.getElementById("content").style.justifyContent="flex-start" 
  var x = document.getElementById("code");
  if (x.innerHTML === "justify-content: flex-start;") {
    x.innerHTML = "justify-content: flex-start;";
  } else {
    x.innerHTML = "justify-content: flex-start;";
  }
}
function functionFlexEnd() {
  document.getElementById("content").style.justifyContent="flex-end" 
  var x = document.getElementById("code");
  if (x.innerHTML === "justify-content: flex-end;") {
    x.innerHTML = "justify-content: flex-end;";
  } else {
    x.innerHTML = "justify-content: flex-end;";
  }
}
function functionCenter() {
 document.getElementById("content").style.justifyContent="center" 
  var x = document.getElementById("code");
  if (x.innerHTML === "justify-content: center;") {
    x.innerHTML = "justify-content: center;";
  } else {
    x.innerHTML = "justify-content: center;";
  }
}
function functionSpaceBetween() {
 document.getElementById("content").style.justifyContent="space-between" 
  var x = document.getElementById("code");
  if (x.innerHTML === "justify-content: space-between;") {
    x.innerHTML = "justify-content: space-between;";
  } else {
    x.innerHTML = "justify-content: space-between;";
  }
}
function functionSpaceAround() {
 document.getElementById("content").style.justifyContent="space-around" 
  var x = document.getElementById("code");
  if (x.innerHTML === "justify-content: space-around;") {
    x.innerHTML = "justify-content: space-around;";
  } else {
    x.innerHTML = "justify-content: space-around;";
  }
}

function functionSpaceEvenly() {
 document.getElementById("content").style.justifyContent="space-evenly" 
  var x = document.getElementById("code");
  if (x.innerHTML === "justify-content: space-evenly;") {
    x.innerHTML = "justify-content: space-evenly;";
  } else {
    x.innerHTML = "justify-content: space-evenly;";
  }
}