<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"
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.