Properties

Properties

Editing
  • account_tree
  • bug_report

align-self

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

설명

기본적으로 align-items와 동일한 처리를 하지만 레이아웃 항목에게 직접 정의하여 개별적으로 위치를 잡는다.

사용 가능한 값 타입

〈'align-self'〉

사용되는 키워드

  • auto

    이 키워드가 사용된 속성이 align-self일 경우에 상위 컨테이너의 계산된 align-items  값으로, justify-self일 경우에 상위 컨테이너의 계산된 justify-items값으로 작동한다.

  • normal

    기본 위치로 설정한다.

  • stretch

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

사용되는 타입

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

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

  • 〈align-self〉autoCSS3

    기본 값이며 요소는 부모 컨테이너의 align-items 속성을 상속 받거나 부모 컨테이너가 없는 경우 stretch로 설정이 됩니다.

  • 〈align-self〉normalCSS3
    Flex Layout

    stretch 값과 동일하다.

    Grid Layout

    레이아웃 항목이 가로 세로 비율을 갖거나 start와 같이 동작하는 고유 크기를 가진 경우를 제외하고는 stretch와 유사하다.

  • 〈align-self〉stretchCSS3
    Flex Layout

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

    Grid Layout

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

  • 〈self-position〉flex-startCSS3
    Flex Layout

    플렉스 컨테이너(flex container) 안의 특정 레이아웃 항목을 교차축(cross axis) 방향으로 플렉스 컨테이너(flex container)의 콘텐츠 시작 위치에 맞춘다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)상의 특정 레이아웃 항목을 컬럼축(column axis) 방향으로 그리드 트랙(grid track)의 콘텐츠가 시작되는 위치에 맞춘다.

  • 〈self-position〉flex-endCSS3
    Flex Layout

    플렉스 컨테이너 안의 특정 레이아웃 항목을 교차축(cross axis) 방향으로 플렉스 컨테이너(flex container)의 콘텐츠가 끝나는 위치에 맞춘다.

    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)상의 특정 레이아웃 항목을 컬럼축(column axis) 방향으로 그리드 트랙(grid track)의 콘텐츠가 끝나는 위치에 맞춘다.

  • 〈self-position〉startCSS3
    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)의 특정 레이아웃 항목이 컬럼축(column axis) 방향에서 콘텐츠가 시작되는 위치에 맞춘다.

  • 〈self-position〉centerCSS3

    로우축(row axis) 그리드 트랙(grid track)의 특정 레이아웃 항목을 컬럼축(column axis) 방향에서 그리드 트랙(grid track)내의 가운데 위치에 맞춘다.

  • 〈self-position〉endCSS3
    Grid Layout

    로우축(row axis) 그리드 트랙(grid track)의 특정 레이아웃 항목을 컬럼축(column axis) 방향에서 콘텐츠가 끝나는 위치에 맞춘다.

  • 〈self-position〉self-startCSS3
  • 〈self-position〉self-endCSS3
  • 〈baseline-position〉baselineCSS3

    컨테이너의 기준선에 배치된다.

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

구문

  • align-self auto | stretch | center | flex-start | flex-end | baseline;CSS3
    Flex 레이아웃에서 두번째 레이아웃 항목에게 align-self 속성 값을 center로 지정할 경우에 대한 결과

    Grid 레이아웃에서 두번째 레이아웃 항목에게 align-self 속성 값을 end로 지정할 경우에 대한 결과

테스트 도구

(1) Flex 레이아웃일 경우 align-self 속성 값 테스트

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

버전 명세

Modules
Module NameStatusSummary

Last review date:

지원 웹브라우저