Properties

Properties

Draft
  • account_tree
  • bug_report

align-itemsCSS3

Flex Layou에서 플렉스 컨테이너(flex container)에 존재하는 레이아웃 항목에 대한 교차축(cross axis) 방향 정렬과 Grid Layout에서 로우축(row axis) 그리드 트랙(grid track)에 존재하는 레이아웃 항목에 대한 컬럼축(column axis) 방향의 정렬을 설정한다.

설명

align-items 속성은 align-content 속성과 동일 결과를 가져오는 것 같지만 align-items 속성은 각 레이아웃 항목의 콘텐츠 크기를 기준으로 한다는 것이 차이점이다. stretch가 아닌 경우 각 레이아웃 항목은 콘텐츠 만큼의 공간을 가지게 된다.

align-items 속성은 align-content 속성의 모든 키워드를 값으로 사용할 수 없음을 주의한다.

설정 가능한 속성 값

  • normal키워드CSS3
    Flex Layout

    stretch로 처리된다.

    Grid Layout

    종횡비 또는 start 값 처럼 동작하는 고유 크기가 있는 그리드 항목을 제외하고는 stretch 처럼 동작한다.

  • stretch키워드CSS3
    Flex Layout

    플렉스 컨테이너(flex container) 안의 레이아웃 항목을 교차축(cross axis) 방향으로 늘려서 공간을 채운다.

    Grid Layout

    grid-auto-rows 또는 grid-template-rows의 크기가 auto인 경우 로우축(row axis) 그리드 트랙(grid track)상의 레이아웃 항목을 컬럼축(column axis) 방향으로 늘려서 공간을 채운다.

  • flex-start키워드CSS3
    Flex Layout

    플렉스 컨테이너(flex container) 안의 레이아웃 항목을 교차축(cross axis) 방향으로 플렉스 컨테이너(flex container)의 콘텐츠 시작 위치에 맞춘다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)상의 레이아웃 항목을 컬럼축(column axis) 방향으로 그리드 트랙(grid track)에서 콘텐츠가 시작되는 위치에 맞춘다.

  • flex-end키워드CSS3
    Flex Layout

    플렉스 컨테이너(flex container) 안의 레이아웃 항목을 교차축(cross axis) 방향으로 플렉스 컨테이너(flex container)의 콘텐츠가 끝나는 위치에 맞춘다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)상의 레이아웃 항목을 컬럼축(column axis) 방향으로 그리드 트랙(grid track)에서 콘텐츠가 끝나는 위치에 맞춘다.

  • start키워드CSS3
    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)의 레이아웃 항목을 컬럼축(column axis) 방향에서 콘텐츠가 시작되는 위치에 맞춘다.

  • center키워드CSS3
    Flex Layout

    플렉스 컨테이너(flex container)의 레이아웃 항목들을 교차축(cross axis) 방향으로 플렉스 컨테이너(flex container) 가운데에 배치한다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)내의 레이아웃 항목을 컬럼축(column axis) 방향으로 그리드 트랙(grid track)의 가운데에 배치한다.

  • end키워드CSS3
    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)의 레이아웃 항목을 컬럼축(column axis) 방향에서 콘텐츠가 끝나는 위치에 맞춘다.

  • self-start키워드CSS3
  • self-end키워드CSS3
  • baseline키워드CSS3

    부모 요소의 기준 행에 위치, flex-start와 동일 결과

  • first baseline키워드CSS3
  • last baseline키워드CSS3
  • safe키워드CSS3
  • unsafe키워드CSS3

구문

  • align-items stretch or center or flex-start or flex-end or baseline;기본형식CSS3
    Flex 레이아웃에서 align-items 속성 값을 center로 설정할 경우에 대한 테스트
  • object.style.alignItems = "center";자바스크립트 형식CSS3

    자바스크립트 형식

테스트 도구

(1) Flex Layout일 경우 align-items 속성 값 테스트

(2) Grid Layout일 경우 align-items 속성 값 테스트

버전 명세

Version NameDescriptionFlags
CSS3

기술 문서

align-content vs align-items

align-content 속성과 align-items 속성은 같아 보일 수 있겠지만 분명히 다르다. 다음 아래의 샘플 코드를 참고하라.

지원 웹브라우저