Properties

Properties

Draft
  • account_tree
  • bug_report

align-selfCSS3, Box Alignment Module Level 3

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

설명

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

설정 가능한 속성 값

  • auto기본값키워드CSS3

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

  • normal키워드CSS3
    Flex Layout

    stretch 값과 동일하다.

    Grid Layout

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

  • flex-start키워드CSS3
    Flex Layout

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

    Grid Layout

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

  • flex-end키워드CSS3
    Flex Layout

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

    Grid Layout

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

  • start키워드CSS3
    Grid Layout

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

  • center키워드CSS3

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

  • end상수CSS3
    Grid Layout

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

  • self-start키워드CSS3
  • self-end키워드CSS3
  • baseline키워드CSS3

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

  • first baseline키워드CSS3
  • last baseline키워드CSS3
  • stretch키워드CSS3
    Flex Layout

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

    Grid Layout

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

  • safe키워드CSS3
  • unsafe키워드CSS3
  • initial키워드CSS3

    CSS 기본 값으로 처리된다.

구문

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

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

테스트 도구

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

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

버전 명세

Version NameDescriptionFlags
CSS3
Box Alignment Module Level 3module

지원 웹브라우저