This page was translated from English by the community.Learn more and join the MDN Web Docs community.
align-items
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 9월.
* Some parts of this feature may have varying levels of support.
CSSalign-items 속성은 모든 직계 자식에 대해align-self값을 그룹으로 설정합니다. 플렉스박스의교차축을 따라 아이템을 정렬합니다. 그리드 레이아웃의그리드 영역내 블록 축을 따라 아이템을 정렬합니다.
아래의 대화형 예제는 그리드 레이아웃을 사용하여align-items의 속성 값을 시연합니다.
시도해 보기
align-items: stretch;align-items: center;align-items: start;align-items: end;<section> <div> <div> <div>One</div> <div>Two</div> <div>Three</div> </div> </div></section>#example-element { border: 1px solid #c5c5c5; display: grid; width: 200px; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px;}#example-element > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue;}구문
/* 기본 키워드 값 */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
#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
<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div></div><div> <label for="display">display: </label> <select> <option value="flex">flex</option> <option value="grid">grid</option> </select></div><div> <label for="values">align-items: </label> <select> <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 |
브라우저 호환성
같이 보기
- CSS 플렉스박스의 기본 개념:flexbox의 기본 개념
- CSS 플렉스박스 가이드:Aligning items in a flex container
- CSS 그리드 가이드:Box alignment in CSS Grid layouts
- CSS Box Alignment
align-self속성