align-self
align-self 속성을 이용하면 특정 플렉스 아이템을 개별적으로 배치할 수 있습니다. 플렉스 컨테이너에서 아이템 전체의 배치 방법을 결정하지만 align-self 속성으로 특정 아이템의 배치 방법을 변경할 수 있습니다.
예를 들어 display:flex 속성으로 정의된 플렉스 컨테이너에 align-items의 속성 값을 stretch로 적용하면 아래와 같이 모든 플렉스 아이템의 높이를 쭉 늘려 가득 채웁니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
body {
margin: 0;
}
.container {
height: 100vh;
background-color: #01579b;
display: flex;
}
.item {
padding: 20px;
}
.item:nth-child(1) {
background-color: #ffebee;
}
.item:nth-child(2) {
background-color: #ffcdd2;
font-size: 2em;
}
.item:nth-child(3) {
background-color: #ef9a9a;
font-size: 3em;
}
만약 특정 아이템의 정렬을 따로 정하고 싶다면 align-self 속성을
사용합니다. 기본값은 auto 로 align-items의 속성의 값을 상속 받습니다. 사용할
수 있는 속성 값은 align-items의 속성 값과 같습니다. stretch,
flex-start, flex-end, center,
baseline 등을 사용할 수 있습니다.
body {
margin: 0;
}
.container {
height: 100vh;
background-color: #01579b;
display: flex;
}
.item {
padding: 20px;
}
.item:nth-child(1) {
background-color: #ffebee;
align-self: flex-start;
}
.item:nth-child(2) {
background-color: #ffcdd2;
font-size: 2em;
align-self: flex-end;
}
.item:nth-child(3) {
background-color: #ef9a9a;
font-size: 3em;
align-self: center;
}