Properties

Properties

Draft
  • account_tree
  • bug_report

Box Alignment

컨테이너 내의 컨텐츠를 정렬하는 경우에는 다음과 같이 컨테이너와 정렬 대상과의 관계에 따라 다른 방법을 사용한다.

  • block 수준의 요소 내에 존재하는 inline 또는 linie-block 수준의 요소
  • table의 th 또는 td 내에 존재하는 콘텐츠
  • Flex Layout
  • Grid Layout

다음은 Flex와 Grid Layout에서의 정렬을 하고자 할 때 사용되는 축을 보여주고 있다.

Flex Layout에서의 정렬 축

Flex Layout에서는 동일한 레이아웃 항목이라도 flex-wrap 속성의 값을 wrap을 주어 다음 행으로 밀려 내려가면 기본적으로 별개의 flex 컨테이너로 처리한다.

flex-direction 속성이 row 또는 row-reverse 값을 갖는 경우에는 다음과 같이 두 개의 축을 갖는다.

flex-direction 속성이 column 또는 column-reverse 값을 갖는 경우에는 다음과 같이 두 개의 축을 갖는다. 또한 writing-mode 속성의 값이 vertical-rl 또는 vertical-lr 일 경우에도 해당된다.

Grid Layout에서의 정렬 축

writing-mode 속성의 값이 horizontal-tb 일 경우 다음과 같이 축을 갖는다.

writing-mode 속성의 값이 vertical-rl 또는 vertical-lr 일 경우 다음과 같이 축을 갖는다.

관련 속성들

  • align-content

    Flex Layout에서 플렉스 컨테이너(flex container)에 대한 교차축(cross axis) 방향 정렬과 Grid Layout에서 로우축(row axis) 그리드 트랙(grid track)에 대한 컬럼축(column axis) 방향으로 정렬을 설정한다.
  • align-items

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

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

    컬럼(열)과 컬럼(열) 사이의 간격을 지정한다.
  • gap

    Flex Layout과 Grid Layout에서 레이아웃 항목의 행과 열 사이의 간격를 설정한다.
  • justify-content

    Flex Layout에서 플렉스 컨테이너(flex container) 내 레이아웃 항목을 주축(main axis) 방향으로 정렬을 설정한다. Grid Layout에서는 로우축(row axis) 그리드 트랙(grid track)을 로우축(row axis) 방향으로 정렬을 설정한다.
  • justify-items

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

    flex 또는 grid 항목의 위치에 대한 순서를 지정한다.
  • row-gap

    요소간(그리드)의 행 사이의 간격을 지정한다.
  • text-align

    선택자를 갖는 요소내 콘텐츠를 정렬한다.
  • vertical-align

    inline-level 요소, display 타입이 table-cell인 요소의 세로 방향 정렬을 지정한다.