Properties

Properties

Draft
  • account_tree
  • bug_report

align-contentCSS3

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)에 채워진다.

설정 가능한 속성 값

  • stretch기본값키워드CSS3
    Flex Layout

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

    Grid Layout

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

  • normal키워드CSS3

    기본 위치로 설정된다.

  • flex-start키워드CSS3
    Flex Layout

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

    Grid Layout

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

  • flex-end키워드CSS3
    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인 경우

  • space-between키워드CSS3
    Flex Layout

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

    Grid Layout

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

  • space-around키워드CSS3
    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 간격을 갖는다.

  • space-evenly키워드CSS3
    Flex Layout

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

    Grid Layout

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

  • start키워드CSS3
    Grid Layout

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

  • center키워드CSS3
    Flex Layout

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

    Grid Layout

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

  • end키워드CSS3
    Grid Layout

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

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

    CSS 기본 값으로 설정한다.

구문

  • align-content stretch or center or flex-start or flex-end or space-between or space-around or initial;기본형식CSS3

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

    Flex Layout 일 경우 align-content 속성 값 테스트
  • align-content start or end or center or normal;기본형식CSS3

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

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

    자바스크립트 형식

테스트 도구

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

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

버전 명세

Version NameDescriptionFlags
CSS3

기술 문서

align-content vs align-items

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

지원 웹브라우저