Properties

Properties

Editing
  • account_tree
  • bug_report

justify-items

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

설명

Flex Layout에서는 적용되지 않는다.

사용 가능한 값 타입

〈'justify-items'〉

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

사용되는 키워드

  • center

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

  • left

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

  • right

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

  • legacy

    상속된 값으로 처리한다.

  • normal

    기본 위치로 설정한다.

  • stretch

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

사용되는 타입

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

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

  • 〈self-position〉start

    레이아웃 항목을 그리드 트랙(grid track) 내에서 콘텐츠가 시작되는 위치에 배치한다.

    Grid 레이아웃에서 justify-items 속성 값을 start로 설정할 경우에 대한 테스트

  • 〈self-position〉center

    레이아웃 항목을 그리드 트랙(grid track) 내에서 가운데 위치에 배치한다.

    Grid 레이아웃에서 justify-items 속성 값을 center로 설정할 경우에 대한 테스트

  • 〈self-position〉end

    기본 트랙 내에서 오른쪽 끝에 배치한다.

    Grid 레이아웃에서 justify-items 속성 값을 end로 설정할 경우에 대한 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Box Alignment Module Level 3

Last review date: 2022-6-26

지원 웹브라우저