English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성大全

CSS3 align-items 속성 사용 방법 및 예제

align-items 속성은 flex 컨테이너 내 요소에 기본 정렬 방식을 지정합니다.

이 표는 이 속성의 사용 상황과 버전 기록을 요약한 것입니다.

기본값:stretch
적용 가능한:융융 컨테이너
thừa kế:없음
애니메이션 가능:아니요.참조: 애니메이션 속성。
버전:CSS3의 새 기능
JavaScript 문법:object.style.alignItems="center"

align-items 사용 문법

이 속성의 문법은 다음과 같습니다:

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

아래 예제는 사용 중인 align을 보여줍니다:-items 속성.

　.flex-container　{
　　　　　　　　　　　/*　Safari　*/
　　　　　　　　　　　display:　-webkit-flex;　
　　　　　　　　　　　-webkit-align-items:　center;
　　　　　　　　　　　
　　　　　　　　　　　display:　flex;
　　　　　　　　　　　align-items:　center;
　　　}
시험해보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

값설명
baseline요소가 유연한 컨테이너의 기본선에 위치합니다.
center요소가 스타일링 컨테이너의 중앙에 위치합니다.
flex-start요소가 플렉스 컨테이너의 시작에 위치합니다.
flex-end요소가 플렉스 컨테이너의 끝에 위치합니다.
stretch요소를 스타일링 컨테이너에 맞게 확장합니다. 공간은 모든 요소 사이에 평균으로 분배됩니다. 이는 기본 값입니다.
initial이 속성을 기본 값으로 설정합니다.
inherit지정된 경우, 관련 요소는 부모 요소의 align 속성을 사용합니다.-items 값.

브라우저 호환성

align-items 속성의 브라우저 호환성, 모든 주요 브라우저가 이 속성을 지원합니다.

  • Firefox 20+

  • Google Chrome21+

  • Internet Explorer 11+

  • Apple Safari 7+ -webkit-

  • Opera 12.1+

주의: Apple Safari 7및 더 이상 버전에서 align 지원-items 속성, 하지만-webkit-프리كس, 예를 들어-webkit-align-items: center;

추가로 읽기

다음 튜토리얼을 참조하세요:CSS 정렬。

관련 속성:align-content，align-items，align-self，display，flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，justify-content，min-height，min-width，order。

CSS3 align-self 속성CSS3 align-content 속성