.flexExamples {
min-height: 40px;
max-width: 620px;
background-color: #676767;
margin: 10px 20px;
border: 1px solid #4a4a4a;
}
.flexExamples span {
margin: 0 3px;
transition: 0.4s ease;
}
.flexExamples span:hover {
font-size: 28px;
cursor: pointer;
}
.flexExamples .divExampleButton {
width: 100%;
display: flex;
justify-content: space-around;
}
.flexExamples #exampleFlex {
min-height: 150px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flexExamples #exampleFlex div {
width: 200px;
border: 1px solid black;
margin: 1px;
text-align: center;
}
<div class="flexExamples">
<div class="divExampleButton" style="border-bottom: 1px solid #4a4a4a;margin-bottom: 2px;">
<span onclick="flexFunElement('stretch', 0, alignContentArray)" class="alignContentElement" style="font-weight:900;">stretch</span>
<span onclick="flexFunElement('flex-start', 1, alignContentArray)" class="alignContentElement">flex-start</span>
<span onclick="flexFunElement('flex-end', 2, alignContentArray)" class="alignContentElement">flex-end</span>
<span onclick="flexFunElement('center', 3, alignContentArray)" class="alignContentElement">center</span>
</div>
<div id="exampleFlex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="divExampleButton" style="border-top: 1px solid #4a4a4a;margin-top: 2px;">
<span onclick="flexFunElement('space-between', 4, alignContentArray)" class="alignContentElement">space-between</span>
<span onclick="flexFunElement('space-around', 5, alignContentArray)" class="alignContentElement">space-around</span>
<span onclick="flexFunElement('space-evenly', 6, alignContentArray)" class="alignContentElement">space-evenly</span>
</div>
</div>
var alignContentArray = [7, 'alignContentElement', 'exampleFlex', 'alignContent'];
function flexFunElement(status, number, array) {
var element = document.getElementsByClassName(array[1]);
for (var i = 0; i < array[0]; i++) {
element[i].style.fontWeight = 100;
}
document.getElementById(array[2]).style.[array[3]]= status;
element[number].style.fontWeight = 900;
}