<div class="container">
    <div class="buttons">
    <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="functionSpaceBetween()">space-between</button>
         <button class="button" onclick="functionSpaceAround()">space-around</button>
      <button class="button" onclick="functionStretch()">stretch</button>
  </div>
  </div>
<div id="content">
  <div style="background-color:#264653;"></div>
  <div style="background-color:#2a9d8f;"></div>
  <div style="background-color:#e9c46a;"></div>
  <div style="background-color:#f4a261;"></div>
 <div style="background-color:#e76f51;"></div>
  <div style="background-color:#e76f51;"></div>
</div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.container {
  position: relative;
  top:-50px;
}

#content {
  width: 250px;
  height: 250px;
  border: 3px solid #333;
  display: flex;
  flex-wrap: wrap;
}

#content div {
  width: 50px;
  height: 50px;
}

.buttons {
  margin-left:-120px;
  top:50px;
  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.alignContent="center" 
}
function functionFlexStart() {
  document.getElementById("content").style.alignContent="flex-start" 
}
function functionFlexEnd() {
  document.getElementById("content").style.alignContent="flex-end" 
}
function functionSpaceBetween() {
  document.getElementById("content").style.alignContent="space-between" 
}
function functionSpaceAround() {
  document.getElementById("content").style.alignContent="space-around" 
}
function functionStretch() {
  document.getElementById("content").style.alignContent="stretch" 
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.