align-items
align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 기본값은 stretch로, 컨테이너의 높이에 맞게 늘립니다.
기본형
align-items : stretch | flex-start | flex-end | center | baseline
- stretch : 높이를 꽉 채웁니다. (기본값)
- flex-start : 위쪽에 배치합니다.
- flex-end : 아래쪽에 배치합니다.
- center : 가운데에 배치합니다.
- baseline : 가장 큰 글자의 기준선에 맞춥니다.
align-items: stretch
기본값은 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: 0px;
}
.container {
height: 100vh;
background-color: #01579b;
display: flex;
align-items: stretch;
}
.item {
padding: 10px;
}
.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-items: flex-start
align-items의 값을 flex-start로 정하면, 위쪽에 맞춥니다.
.container {
height: 100vh;
background-color: #01579b;
display: flex;
align-items: flex-start;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
align-items: flex-end
align-items의 값을 flex-end로 정하면, 아래쪽에 맞춥니다.
.container {
height: 100vh;
background-color: #01579b;
display: flex;
align-items: flex-end;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
align-items: center
align-items의 값을 center로 정하면, 중간에 맞춥니다.
.container {
height: 100vh;
background-color: #01579b;
display: flex;
align-items: center;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
baseline
align-items의 값을 baseline으로 정하면, 글자의 베이스라인에 맞춥니다.
.container {
height: 100vh;
background-color: #01579b;
display: flex;
align-items: baseline;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.