align-items

CSS align-items 속성은 모든 직계 자식에 대해 align-self값을 그룹으로 설정합니다. 플렉스박스의 교차축을 따라 아이템을 정렬합니다. 그리드 레이아웃의 그리드 영역내 블록 축을 따라 아이템을 정렬합니다.

아래의 대화형 예제는 그리드 레이아웃을 사용하여 align-items의 속성 값을 시연합니다.

시도해보기

구문

css

/* 기본 키워드 값 */
align-items: normal;
align-items: stretch;

/* 위치 기준 정렬 */
/* align-items는 좌우 값을 가지지 않습니다. */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;

/* 기준선 정렬 */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* 오버플로우 정렬 (위치 정렬에서만) */
align-items: safe center;
align-items: unsafe center;

/* 전역 값 */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

값

normal

현재 사용 중인 레이아웃에 따라 달라집니다.

절대 위치 지정 레이아웃에서 교체된 절대 위치 지정 박스에서는 start로 동작하고 다른 모든 절대 위치 지정 박스에서는 stretch로 동작합니다.
절대 위치 지정 레이아웃의 정적 위치에서 stretch로 동작합니다
플렉스 아이템의 경우 stretch로 동작합니다
그리드 아이템의 경우 stretch와 유사하게 동작하지만 종횡비나 고유 크기가 있는 박스에서는 start로 동작합니다.
이 속성은 블록 레벨 박스 및 테이블 셀에는 적용되지 않습니다.

flex-start

플렉스 레이아웃에서만 사용되며 플렉스 아이템을 플렉스 컨테이너의 주축 시작 또는 교차 축 시작에 맞춰 정렬합니다.

flex-end

플렉스 레이아웃에서만 사용되며 플렉스 아이템을 플렉스 컨테이너의 주축 끝 또는 교차 축 끝에 맞춰 정렬합니다.

center

플렉스 아이템의 마진 박스는 교차 축의 라인에서 가운데 정렬됩니다. 아이템의 교차 크기가 플렉스 컨테이너보다 크다면, 양방향으로 동일하게 오버플로우됩니다.

start

아이템은 적절한 축에서 정렬 컨테이너 시작 가장자리 쪽으로 밀착하여 정렬됩니다.

end

아이템은 적절한 축에서 정렬 컨테이너 끝 가장자리 쪽으로 밀착하여 정렬됩니다.

self-start

아이템은 적절한 축에서 정렬 컨테이너 아이템의 시작 가장자리 쪽에 밀착하여 정렬됩니다.

self-end

아이템은 적절한 축에서 정렬 컨테이너 아이템의 끝 가장자리 쪽에 밀착하여 정렬됩니다.

baseline, first baseline, last baseline

모든 플렉스 아이템은 해당 플렉스 컨테이너 기준선을 따라 정렬됩니다. 교차 시작 마진 가장자리와 해당 기준선 사이의 거리가 가장 큰 아이템이 선의 교차 시작 가장자리에 밀착하여 정렬됩니다.

stretch

아이템이 정렬 컨테이너보다 작다면 자동 크기 조정된 아이템은 아이템의 너비와 높이 제한을 고려하여 컨테이너를 채울 수 있도록 동일하게 확대됩니다.

safe

정렬 키워드 값과 함께 사용됩니다. 선택한 키워드로 인해 아이템이 정렬 컨테이너를 초과하여 데이터 손실을 발생시키는 경우 아이템은 정렬 모드가 start일 때 처럼 정렬됩니다.

unsafe

정렬 키워드 값과 함께 사용됩니다. 아이템과 정렬 컨테이너의 상대적인 크기와 데이터의 손실을 발생시키는 오버플로우의 여부에 관계없이 주어진 값으로 정렬됩니다.

형식 정의

초기값	`normal`
적용대상	all elements
상속	no
계산 값	as specified
Animation type	discrete

형식 구문

align-items = 
  normal                                    |
  stretch                                   |
  <baseline-position>                       |
  [ <overflow-position>? <self-position> ]  |
  anchor-center                             

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

예제

CSS

css

#container {
  height: 200px;
  width: 240px;
  align-items: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

html

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

const values = document.getElementById("values");
const display = document.getElementById("display");
const container = document.getElementById("container");

values.addEventListener("change", (evt) => {
  container.style.alignItems = evt.target.value;
});

display.addEventListener("change", (evt) => {
  container.className = evt.target.value;
});

결과

명세서

Specification
CSS Box Alignment Module Level 3 # align-items-property
CSS Flexible Box Layout Module Level 1 # align-items-property

브라우저 호환성

BCD tables only load in the browser

같이 보기

CSS 플렉스박스의 기본 개념: flexbox의 기본 개념
CSS 플렉스박스 가이드: Aligning items in a flex container
CSS 그리드 가이드: Box alignment in CSS Grid layouts
CSS Box Alignment
align-self 속성