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