CSS align-items 속성

정의와 사용법

align-items 속성을 사용하여 엘라스틱 컨테이너 내의 항목에 기본 정렬 방식을 지정합니다.

ヒント:각 항목의 align-self 속성을 사용하여 이 align-items 속성을 대체합니다.

추가로 참고:

CSS 가이드:CSS 그리드

CSS 가이드:CSS 퍼렉스박스

CSS 참조 가이드:align-content 속성

CSS 참조 가이드:align-self 속성

CSS 참조 가이드:justify-content 속성

CSS 참조 가이드:justify-items 속성

CSS 참조 가이드:justify-self 속성

HTML DOM 참조 가이드:alignItems 속성

예제

모든 프로젝트의弹性<div>요소를 가운데 정렬합니다:

div {
  display: flex;
  align-items: center;
}

본인이 직접 시도해 보세요

CSS 문법

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

속성 값

값 설명
stretch 기본적으로. 항목은 컨테이너에 맞춰 확장됩니다.
center 항목은 컨테이너의 중앙에 위치합니다.
flex-start 항목은 컨테이너의 시작에 위치합니다.
flex-end 항목은 컨테이너의 끝에 위치합니다.
baseline 항목은 컨테이너의 기본선에 배치됩니다.
initial 이 속성을 기본 값으로 설정합니다. 참고: initial。
inherit 부모 요소에서 이 속성을 thừa kế합니다. 참고: inherit。

기술 세부 사항

기본 값: stretch
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참고:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.alignItems="center"

브라우저 지원

표 안의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
57.0 16.0 52.0 10.1 44.0