컨테이너 내의 컨텐츠를 정렬하는 경우에는 다음과 같이 컨테이너와 정렬 대상과의 관계에 따라 다른 방법을 사용한다. 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 일 경우 다음과 같이 축을 갖는다.
Flex Layou에서 플렉스 컨테이너(flex container)에 존재하는 레이아웃 항목에 대한 교차축(cross axis) 방향 정렬과 Grid Layout에서 로우축(row axis) 그리드 트랙(grid track)에 존재하는 레이아웃 항목에 대한 컬럼축(column axis) 방향의 정렬을 설정한다.
Flex Layout의 플렉스 컨테이너(flex container)에 존재하는 특정 레이아웃 항목에 대한 교차축(cross axis) 방향 정렬과 Grid Layout의 로우축(row axis) 그리드 트랙(grid track)에 존재하는 특정 레이아웃 항목에 대한 컬럼축(column axis) 방향의 정렬을 설정한다.
