Properties

Properties

Editing
  • account_tree
  • bug_report

align-content

Flex Layout에서 플렉스 컨테이너(flex container)에 대한 교차축(cross axis) 방향 정렬과 Grid Layout에서 로우축(row axis) 그리드 트랙(grid track)에 대한 컬럼축(column axis) 방향으로 정렬을 설정한다.

설명

Flex Layout

교차축(cross axis)에서 플렉스 컨테이너(flex container) 대한 정렬을 설정한다. 일부 값은 Flex Layout에서만 사용되는 값이 있으므로 주의한다. 플렉스 컨테이너(flex container)에 존재하는 레이아웃 항목들은 교차축(cross axis) 방향으로 부모 컨테이너 기준으로 정렬된다.

Grid Layout

로우축(row axis) 그리드 트랙(grid track)에 대한 컬럼축(column axis) 방향으로 정렬을 설정한다. 그리드 트랙(grid track)에 존재하는 레이아웃 항목들은 컬럼축(column axis) 방향으로 그리드 컨테이너(grid container)에 채워진다.

 

사용 가능한 값 타입

〈'align-content'〉

align-content 속성에 사용하는 타입이다.

사용되는 키워드

  • normal

    기본 위치로 설정한다.

사용되는 타입

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

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

  • 〈align-content〉normal
  • 〈content-distribution〉stretchCSS3
    Flex Layout

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

    Grid Layout

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

  • 〈content-position〉flex-startCSS3
    Flex Layout

    플렉스 컨테이너(flex container)를 교차축(cross axis) 방향으로 부모 요소의 콘텐츠 시작 위치에 맞춘다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)을 그리드 컨테이너(grid container)의 컬럼축(column axis) 방향으로 콘텐츠 시작 위치에 맞춘다.

  • 〈content-position〉flex-endCSS3
    Flex Layout

    플렉스 컨테이너(flex container)를 교차축(cross axis) 방향으로 부모 요소의 콘텐츠가 끝나는 위치에 맞춘다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)을 컬럼축(column axis) 방향으로 그리드 컨테이너(grid container)의 콘텐츠가 끝나는 위치에 맞춘다.

    Flex Layout에서 riting-mode가 horizontal-tb인 경우

    Flex Layout에서 writing-mode가 vertical-lr인 경우

  • 〈content-distribution〉space-betweenCSS3
    Flex Layout

    각 플렉스 컨테이너(flex container)가 교차축(cross axis)을 따라서 부모 요소 내에서 균등하게 배치된다. 각 플렉스 컨테이너(flex container)의 교차축 방향 크기는 플렉스 컨테이너(flex container)의 레이아웃 항목중 최대 콘텐츠를 가지고 있는 크기에 맞춘다. 그리고 플렉스 컨테이너(flex container)내의 레이아웃 항목은 플렉스 컨테이너(flex container)에 맞추어 크기를 갖는다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)이 그리드 컨테이너(grid container) 안에서 컬럼축(column axis) 방향으로 균등하게 배치된다.

  • 〈content-distribution〉space-aroundCSS3
    Flex Layout

    플렉스 컨테이너(flex container)가 교차축(cross axis)을 따라서 부모 요소 내에서 균등하게 배치된다. 각 플렉스 컨테이너(flex container)의 교차축 방향 크기는 플렉스 컨테이너(flex container)의 레이아웃 항목중 최대 콘텐츠를 가지고 있는 크기에 맞춘다. 그리고 플렉스 컨테이너(flex container)내의 레이아웃 항목은 flex 컨테이너에 맞추어 크기를 갖는다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)이  그리드 컨테이너(grid container) 안에서 컬럼축(column axis) 방향으로 균등하게 배치된다. 컬럼축(column axis) 상에서 양쪽 끝의 그리드 트랙(grid track)도 인접 그리드 트랙(grid track)간 간격의 1/2 간격을 갖는다.

  • 〈content-distribution〉space-evenlyCSS3
    Flex Layout

    space-around와 동일해 보이지만 교차축(cross axis) 상의 양쪽 끝의 플렉스 컨테이너(flex container)가 갖는 간격이 인접 플렉스 컨테이너끼리 갖는 간격과 동일한 것이 다르다.

    Grid Layout

    space-around와 동일해 보이지만 컬럼축(column axis) 방향으로 양쪽 끝의 그리드 트랙(grid track)이 갖는 간격이 인접 그리드 트랙(grid track)간 갖는 간격과 동일한 것이 다르다.

  • 〈content-position〉startCSS3
    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)이 컬럼축(column axis) 방향으로 그리드 컨테이너(grid container)의 콘텐츠가 시작되는 위치에 맞춘다.

  • 〈content-position〉centerCSS3
    Flex Layout

    플렉스 컨테이너(flex container)를 교차축(cross axis) 방향으로 부모 요소의 가운데 위치에 맞춘다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)을  컬럼축(column axis) 방향으로 그리드 컨테이너(grid container)의 가운데 위치에 맞춘다.

  • 〈content-position〉endCSS3
    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)이 컬럼축(column axis) 방향으로 그리드 컨테이너(grid container)의 콘텐츠가 끝나는 위치에 맞춘다.

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

구문

  • align-content stretch | center | flex-start | flex-end | space-between | space-around;CSS3

    Flex Layout에서 교차축(cross axis) 방향으로 정렬한다.

    Flex Layout 일 경우 align-content 속성 값 테스트
  • align-content start | end | center | normal;CSS3

    Grid Layout 일 때 레이아웃 항목의 row 방향에 대한 정렬을 설정한다.

    Grid Layout 일 경우 align-content 속성 값 테스트
  • object.style.alignContent = "center";CSS3

    자바스크립트 형식

테스트 도구

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

(2) Grid 레이아웃일 때 경우 align-content 속성 값 테스트

기술 문서

align-content vs align-items

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

지원 웹브라우저