Flexbox - How to do space-around in vertical?
12,509
Resolved. It was a different mistake because image sizes. Solution is simple: codepen.io/devtips/pen/OPQYav (Made by youtube.com/user/DevTipsForDesigners)
.parent {
border: 3px solid orange;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.child {
width: 100px;
height: 100px;
background: blueviolet
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Related videos on Youtube
Author by
João Saro
Updated on September 16, 2022Comments
-
João Saro over 1 year
Probably it's a noob question, but I'm wondering how it's possible do something similar "space-around" but in vertical direction.
This: Half-pad Element pad Element pad Element half-pad
This:
Half-pad
Element
pad
Element
pad
Element
half-padI'm missing how to do half-pad too.
Doing direction: vertical misses initial and end space-around.
.stabled { position: fixed; right:0px; top:0; width:15px; height:100%; z-index:95; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .stabled ul { position:relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction:column; flex-direction:column; height:100%; width:170px; } nav.stabled ul li { position:relative; float:left; margin: 0 auto; } .stabled li.firl { padding-left:0; padding-top:35px; } .stabled:hover { position: fixed; width:170px; box-shadow: 0 0 10px #222; -webkit-box-shadow: 0 0 40px #222; -moz-box-shadow: 0 0 40px #222; opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ }