Properties

Properties

Editing
  • account_tree
  • bug_report

place-items

align-items 속성과 justify-items 속성을 동시에 작성할 수 있는 속기 속성이다.

사용 가능한 값 타입

<'place-items'>

DEVDIC-Specified Data Types

place-items 속기 속성에 사용되는 타입이다.

  • CSS Box Alignment Module Level 3
    <'align-items'> <'justify-items'>?

    align-items 속성 값과 justify-items 속성 값을 공백으로 구분하여 차례대로 작성한다. justify-items 속성 값이 생략된 경우 align-items 속성 값으로 사용된다.

포함된 타입

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

  • <'align-items'>

    DEVDIC-Specified Data Types

    align-items 속성에 사용되는 타입이다.

    • normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]
    Details

    포함된 타입

    • <baseline-position>

      기준선 정렬은 정렬 기준선을 일치시켜 공유 정렬 컨텍스트 내에서 여러 정렬 대상을 정렬한다.

      • CSS Box Alignment Module Level 3
        [ first | last ]? && baseline

        firstlast는 상자에 기본 정렬 기본 설정을 한다. 기본 값은 first이다.

      Details

      사용되는 키워드

      • baseline

        첫번째 기준선으로 계산한다. first baseline과 동일하다.

      • first baseline

        첫번째 기준선 정렬에 맞춘다.

      • last baseline

        마지막 기준선으로 정렬되도록 한다.

    • <overflow-position>

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

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

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

      Details

      사용되는 키워드

      • safe

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

      • unsafe

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

    • <self-position>

      justify-self, align-self 속성에서 사용되며 justify-items, align-items에서도 사용된다.

      • center | start | end | self-start | self-end | flex-start | flex-end
      Details

      사용되는 키워드

      • center

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

      • end

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

      • flex-end

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

      • flex-start

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

      • self-end

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

      • self-start

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

      • start

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

    사용되는 키워드

    • normal

      기본 위치로 설정한다.

    • stretch

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

  • <'justify-items'>

    DEVDIC-Specified Data Types

    justify-items 속성에 사용되는 타입이다.

    • CSS Box Alignment Module Level 3
      normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]
    Details

    포함된 타입

    • <baseline-position>

      기준선 정렬은 정렬 기준선을 일치시켜 공유 정렬 컨텍스트 내에서 여러 정렬 대상을 정렬한다.

      • CSS Box Alignment Module Level 3
        [ first | last ]? && baseline

        firstlast는 상자에 기본 정렬 기본 설정을 한다. 기본 값은 first이다.

      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<baseline-position>]
    • <overflow-position>

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

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

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

      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<overflow-position>]
    • <self-position>

      justify-self, align-self 속성에서 사용되며 justify-items, align-items에서도 사용된다.

      • center | start | end | self-start | self-end | flex-start | flex-end
      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<self-position>]

    사용되는 키워드

    • center

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

    • left

      정렬 컨테이너의 왼쪽 또는 실제 왼쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.

    • right

      정렬 컨테이너의 오른쪽 또는 물리적 오른쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.

    • legacy

      상속된 값으로 처리한다.

    • normal

      기본 위치로 설정한다.

    • stretch

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

속기에 사용되는 관련 속성

모든 속성을 표시하지 않을 수도 있다.

  • align-items

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

  • justify-items

    Grid Layout에서 레이아웃 항목을 기본 트랙 내에서 정렬을 지정한다.

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

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

    기본 위치로 설정한다.

    align-items 속성의 기본 값을 나타낸다. 아래의 justify-items 속성의 기본 값인 legacy에 대한 샘플 코드를 참고하라.

  • 〈'justify-items'〉legacy
    CSS Box Alignment Module Level 3

    상속된 값으로 처리한다.

    justify-items 속성의 기본 값을 나타낸다.

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • CSS Box Alignment Module Level 3

    정렬 컨테이너의 왼쪽 또는 실제 왼쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.

    Example
    Example
  • CSS Box Alignment Module Level 3

    정렬 컨테이너의 오른쪽 또는 물리적 오른쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.

    Example
    Example
  • CSS Box Alignment Module Level 3

    기본 위치로 설정한다.

    Example
    Example
  • CSS Box Alignment Module Level 3

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

    Example
    Example
  • 첫번째 기준선으로 계산한다. first baseline과 동일하다.

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

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

버전 명세

Modules
Module NameStatusSummary
CSS Box Alignment Module Level 3

Last review date: 2022-6-26

지원 웹브라우저