align-self 아이템 하나의 세로 위치

See the Pen align-self by nilgi (@nilgi) on CodePen.

 

<style type="text/css">
.as {
background: goldenrod;
display: flex;
height: 200px;
}

.as > div {
background: blueviolet;
width: 50px;
margin: 7px;
color: whitesmoke;
font-size: 20px;
padding: 5px;
}
</style>

<h2>align-self</h2>
<h3>center</h3>
<div class="as as1">
<div>1</div>
<div style="align-self: center;">2</div> / 2번 아이템의 세로 위치를 중앙에
<div>3</div>
<div>4</div>
</div>
<br/>
<h3>flex-start, end</h3>
<div class="as as1">
<div>1</div>
<div style="align-self: flex-start;">2</div> / 2번 아이템의 세로 위치. 위에서 시작
<div style="align-self: flex-end;">3</div> / 3번 아이템의 세로 위치. 아래에서 시작
<div>4</div>