Properties

Properties

Editing
  • account_tree
  • bug_report

align-items

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 속성의 모든 키워드를 값으로 사용할 수 없음을 주의한다.

사용 가능한 값 타입

〈'align-items'〉

사용되는 키워드

  • normal

    기본 위치로 설정한다.

  • stretch

    정렬 대상의 계산된 너비/높이(축에 적합한)가 자동이고 여백이 모두 자동인 경우 정렬 대상의 사용된 크기를 min-height/min-width/max-height/max-width로 부과되는 구속 조건을 유지하면서 가능한 정렬 컨테이너를 채우는데 필요한 길이로 설정된다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈align-items〉normalCSS3
    Flex Layout

    stretch로 처리된다.

    Grid Layout

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

  • 〈content-distribution〉stretchCSS3
    Flex Layout

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

    Grid Layout

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

  • 〈self-position〉flex-startCSS3
    Flex Layout

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

    Grid Layout

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

  • 〈self-position〉flex-endCSS3
    Flex Layout

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

    Grid Layout

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

  • 〈self-position〉startCSS3
    Grid Layout

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

  • 〈self-position〉centerCSS3
    Flex Layout

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

    Grid Layout

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

  • 〈self-position〉endCSS3
    Grid Layout

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

  • 〈self-position〉self-startCSS3
  • 〈self-position〉self-endCSS3
  • 〈baseline-position〉baselineCSS3

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

  • 〈baseline-position〉first baselineCSS3
  • 〈baseline-position〉last baselineCSS3
  • 〈overflow-position〉safeCSS3
  • 〈overflow-position〉unsafeCSS3

구문

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

    자바스크립트 형식

테스트 도구

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

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

기술 문서

align-content vs align-items

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

지원 웹브라우저