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) 방향으로 부모 컨테이너 기준으로 정렬된다.

align-items 속성과의 차이점은 align-content 속성은 오직 패킹 플렉스 라인(packing flex line)에서만 사용된다. 즉 두 개 이상의 플렉스 라인에서 교차축으로 여유 공간이 있을 때 가상의 플렉스 컨테이너를 기준으로 정렬된다. 단일 플렉스 라인에서는 영향을 미치지 않으며 교차축 방향으로 플렉스 컨테이너를 채우기 위해서 늘어나는 결과를 만든다.
Grid Layout

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

정렬 축

Flex LayoutGrid Layout

사용 가능한 값 타입

<'align-content'>

DEVDIC-Specified Data Types

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

  • CSS Box Alignment Module Level 3
    normal | <content-distribution> | <overflow-position>? <content-position>

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <content-distribution>

    justify-content, align-content 속성에서 사용되는 정렬 키워드를 나타낸다.

    • CSS Box Alignment Module Level 3
      space-between | space-around | space-evenly | stretch

      justify-contentalign-content 속성에서 정렬 대상 사이에 컨테이너의 추가 공간을 분산시킨다.

    Details

    사용되는 키워드

    • space-around

      기본적으로 space-between와 동일하지만 양쪽 끝에도 형성된 간격의 1/2 간격을 각각 갖는다.

    • space-between

      정렬 대상은 정렬 컨테이너 안에서 고르게 배치된다. 첫번째 정렬 대상은 정렬 컨테이너의 시작 모서리와 같은 높이로 배치되고 마지막 정렬 대상은 정렬 컨테이너의 끝 모서리와 같은 높이로 배치된다. 나머지 정렬 대상은 시작과 끝 정렬 대상 사이에서 필요에 따라 간격이 균등하게 배분되어 배치된다.

    • space-evenly

      기본적으로 space-around와 동일하지만 첫번째 정렬 대상의 이전, 마지막 정렬 대상의 이후 간격과 첫번째 정렬 대상과 마지막 정렬 대상 사이의 간격이 정렬 컨테이너 내에서 균등하도록 배치한다.

    • stretch

      정렬 대상의 전체 차지하는 영역의 크기가 정렬 컨테이너의 크기보다 작은 경우 자동으로 비례적으로 늘려서 정렬 컨테이너에 꽉 차도록 한다.

  • <content-position>

    justify-content, align-content 속성에서 사용되는 정렬 키워드를 나타낸다.

    • CSS Box Alignment Module Level 3
      center | start | end | flex-start | flex-end

      justify-content, align-content 속성에서 상자의 내용을 정렬한다.

    Details

    사용되는 키워드

    • center

      정렬 컨테이너 내에서 정렬 대상들을 가운데 배치한다.

    • end

      적절한 축에서 정렬 컨테이너의 끝 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.

    • flex-end

      플렉스(flex) 레이아웃에서만 사용된다. 필요에 따라 플렉스 컨테이너의 기본 끝 또는 교차 끝 측면에 해당하는 정렬 컨테이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.

    • flex-start

      플렉스(flex) 레이아웃에서만 사용된다. 플렉스 컨테이너의 기본 시작 또는 교차 시작 측면에서 해당하는 정렬 컨텐이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.

    • start

      적절한 축에서 정렬 컨테이너의 시작 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.

  • <overflow-position>

    정렬 대상이 정렬 컨테이너보다 큰 경우에는 오버플로우가 되므로 일부 정렬 모드에서는 콘텐츠가 표시되지 않을 수 있다. 이 상황을 제어하기 위해 오버플로우 정렬 모드를 사용한다.

    이 타입은 웹브라우저 지원 현황을 확인할 필요가 있다.
    • CSS Box Alignment Module Level 3
      [ unsafe | safe ]? <content-position>

      unsafe는 오버플로우가 되는 상황에서 콘텐츠 유실이 있더라도 지정된 정렬 모드를 준수한다. safe는 오버플로우가 되는 상황에서 콘텐츠 유실을 방지하기 위해 정렬 모드를 변경한다.

    Details

    사용되는 키워드

    • safe

      정렬 대상의 전체 영역의 크기가 정렬 컨테이너 안에서 수용할 수 없으면 정렬 대상이 start 정렬 모드가 시작된 것 처럼 배치된다.

    • unsafe

      정렬 대상과 정렬 컨테이너의 상대적 크기에 관계없이 지정된 정렬 값이 적용된다.

사용되는 키워드

  • normal

    기본 위치로 설정한다.

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

  • 〈'align-content'〉normal
    CSS Box Alignment Module Level 3

    기본 위치로 설정한다.

  • CSS Box Alignment Module Level 3

    정렬 대상의 전체 차지하는 영역의 크기가 정렬 컨테이너의 크기보다 작은 경우 자동으로 비례적으로 늘려서 정렬 컨테이너에 꽉 차도록 한다.

    Flex Layout

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

    Grid Layout

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

    Example
    Example
  • CSS Box Alignment Module Level 3

    플렉스(flex) 레이아웃에서만 사용된다. 플렉스 컨테이너의 기본 시작 또는 교차 시작 측면에서 해당하는 정렬 컨텐이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.

    Flex Layout

    플렉스 컨테이너(flex container)를 교차축(cross axis) 방향으로 부모 요소의 콘텐츠 시작 위치에 맞춘다. flex-wrap 속성이 wrap 값을 값는 경우에 정렬이 적용되며 wrap-reverse 값을 갖는 경우에는 반대로 정렬된다.

    Grid Layout

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

    Example
    Example
  • CSS Box Alignment Module Level 3

    플렉스(flex) 레이아웃에서만 사용된다. 필요에 따라 플렉스 컨테이너의 기본 끝 또는 교차 끝 측면에 해당하는 정렬 컨테이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.

    Flex Layout

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

    Grid Layout

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

    Example
    Example
    Example
    Example
  • CSS Box Alignment Module Level 3

    정렬 대상은 정렬 컨테이너 안에서 고르게 배치된다. 첫번째 정렬 대상은 정렬 컨테이너의 시작 모서리와 같은 높이로 배치되고 마지막 정렬 대상은 정렬 컨테이너의 끝 모서리와 같은 높이로 배치된다. 나머지 정렬 대상은 시작과 끝 정렬 대상 사이에서 필요에 따라 간격이 균등하게 배분되어 배치된다.

    Flex Layout

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

    Grid Layout

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

    Example
    Example
  • CSS Box Alignment Module Level 3

    기본적으로 space-between와 동일하지만 양쪽 끝에도 형성된 간격의 1/2 간격을 각각 갖는다.

    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 간격을 갖는다.

    Example
    Example
  • CSS Box Alignment Module Level 3

    기본적으로 space-around와 동일하지만 첫번째 정렬 대상의 이전, 마지막 정렬 대상의 이후 간격과 첫번째 정렬 대상과 마지막 정렬 대상 사이의 간격이 정렬 컨테이너 내에서 균등하도록 배치한다.

    Flex Layout

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

    Grid Layout

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

    Example
    Example
  • CSS Box Alignment Module Level 3

    적절한 축에서 정렬 컨테이너의 시작 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.

    Grid Layout

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

    Example
    Example
  • CSS Box Alignment Module Level 3

    정렬 컨테이너 내에서 정렬 대상들을 가운데 배치한다.

    Flex Layout

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

    Grid Layout

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

    Example
    Example
  • CSS Box Alignment Module Level 3

    적절한 축에서 정렬 컨테이너의 끝 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.

    Grid Layout

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

    Example
    Example
  • CSS Box Alignment Module Level 3

    정렬 대상의 전체 영역의 크기가 정렬 컨테이너 안에서 수용할 수 없으면 정렬 대상이 start 정렬 모드가 시작된 것 처럼 배치된다.

  • CSS Box Alignment Module Level 3

    정렬 대상과 정렬 컨테이너의 상대적 크기에 관계없이 지정된 정렬 값이 적용된다.

구문

  • align-content: center;
    CSS Box Alignment Module Level 3
    Flex Layout 일 경우 align-content 속성 값 테스트
  • align-content: end;
    CSS Box Alignment Module Level 3

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

    Grid Layout 일 경우 align-content 속성 값 테스트
  • object.style.alignContent = "center";
    CSS Box Alignment Module Level 3

테스트 도구

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

버전 명세

Modules
Module NameStatusSummary
CSS Box Alignment Module Level 3

Last review date: 2022-6-26

Flexible Box Layout Module Level 1추천 후보

Last review date: 2022-6-16

기술 문서

align-content vs align-items

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

지원 웹브라우저