Flex 아이템의 교차축 정렬 정하기 - align-items

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 기본값은 stretch로, 컨테이너의 높이에 맞게 늘립니다.
2 min read

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;
}

 

 

기타 CSS 참조

You may like these posts

  • justify-content justify-content는 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정하고 flex-direction의 값이 column이라면 세로 방향의 정렬을 정합니다.   …
  • align-self align-self 속성을 이용하면 특정 플렉스 아이템을 개별적으로 배치할 수 있습니다. 플렉스 컨테이너에서 아이템 전체의 배치 방법을 결정하지만 align-self 속성으로 특정 아이템의 배치 방법을 변경할 수 있습니다. 예를 들어 display:flex 속성으로 정의된 플…
  • 플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어주어야 합니다. 즉, 배치하려는 웹 요소들이 있다면 그 요소들을 감싸는 부모 요소를 만들고 그 부모 요소를 플렉스 컨테이너로 만들어야 합니다. 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 플렉스 박스 형태…
  • flex-wrap 기본적으로 플렉스 컨테이너 안의 플렉스 아이템들은 한 줄로 배치됩니다. 하지만 flex-wrap 속성을 사용하면 여러 줄로 배치할 수 있습니다.   기본형 flex-wrap : nowrap | warp | warp-reverse nowrap : 한 줄로 배열합…
  • flex-direction 플렉스 컨테이너를 지정했다면 플렉스 항목을 배열할 방향을 알려주어야 합니다. flex-direction 속성을 사용해 플렉스 항목의 주축을 가로(row)로 할지, 세로(column)로 할지 지정합니다.   기본형 flex-direction : row | r…
  • align-content flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다.   기본형 justif…

Post a Comment