Flex Layout에서 플렉스 컨테이너(flex container) 내 레이아웃 항목을 주축(main axis) 방향으로 정렬을 설정한다. Grid Layout에서는 로우축(row axis) 그리드 트랙(grid track)을 로우축(row axis) 방향으로 정렬을 설정한다.
Flex Layout에서는 플렉스 컨테이너(flex container) 내 모든 레이아웃 항목의 주축(main axis) 방향 크기의 합이 부모 컨테이너보다 작은 경우에 정렬을 한다.
Grid Layout에서는 로우축(row axis) 그리드 트랙(grid track)의 크기가 그리드 컨테이너(grid container)보다 작을 경우에 정렬을 한다.
설정 가능한 값들은 많으나 웹브라우저 마다 지원 여부가 다르므로 반드시 확인이 필요하다.
Flex Layout | Grid Layout |
normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
justify-content
, align-content
속성에서 사용되는 정렬 키워드를 나타낸다.
space-between | space-around | space-evenly | stretch
justify-content
와 align-content
속성에서 정렬 대상 사이에 컨테이너의 추가 공간을 분산시킨다.
기본적으로 space-between와 동일하지만 양쪽 끝에도 형성된 간격의 1/2 간격을 각각 갖는다.
정렬 대상은 정렬 컨테이너 안에서 고르게 배치된다. 첫번째 정렬 대상은 정렬 컨테이너의 시작 모서리와 같은 높이로 배치되고 마지막 정렬 대상은 정렬 컨테이너의 끝 모서리와 같은 높이로 배치된다. 나머지 정렬 대상은 시작과 끝 정렬 대상 사이에서 필요에 따라 간격이 균등하게 배분되어 배치된다.
기본적으로 space-around와 동일하지만 첫번째 정렬 대상의 이전, 마지막 정렬 대상의 이후 간격과 첫번째 정렬 대상과 마지막 정렬 대상 사이의 간격이 정렬 컨테이너 내에서 균등하도록 배치한다.
정렬 대상의 전체 차지하는 영역의 크기가 정렬 컨테이너의 크기보다 작은 경우 자동으로 비례적으로 늘려서 정렬 컨테이너에 꽉 차도록 한다.
justify-content
, align-content
속성에서 사용되는 정렬 키워드를 나타낸다.
center | start | end | flex-start | flex-end
justify-content, align-content 속성에서 상자의 내용을 정렬한다.
정렬 컨테이너 내에서 정렬 대상들을 가운데 배치한다.
적절한 축에서 정렬 컨테이너의 끝 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
플렉스(flex) 레이아웃에서만 사용된다. 필요에 따라 플렉스 컨테이너의 기본 끝 또는 교차 끝 측면에 해당하는 정렬 컨테이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
플렉스(flex) 레이아웃에서만 사용된다. 플렉스 컨테이너의 기본 시작 또는 교차 시작 측면에서 해당하는 정렬 컨텐이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
적절한 축에서 정렬 컨테이너의 시작 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
정렬 대상이 정렬 컨테이너보다 큰 경우에는 오버플로우가 되므로 일부 정렬 모드에서는 콘텐츠가 표시되지 않을 수 있다. 이 상황을 제어하기 위해 오버플로우 정렬 모드를 사용한다.
[ unsafe | safe ]? <content-position>
unsafe
는 오버플로우가 되는 상황에서 콘텐츠 유실이 있더라도 지정된 정렬 모드를 준수한다. safe
는 오버플로우가 되는 상황에서 콘텐츠 유실을 방지하기 위해 정렬 모드를 변경한다.
정렬 대상의 전체 영역의 크기가 정렬 컨테이너 안에서 수용할 수 없으면 정렬 대상이 start 정렬 모드가 시작된 것 처럼 배치된다.
정렬 대상과 정렬 컨테이너의 상대적 크기에 관계없이 지정된 정렬 값이 적용된다.
정렬 컨테이너의 왼쪽 또는 실제 왼쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.
정렬 컨테이너의 오른쪽 또는 물리적 오른쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.
기본 위치로 설정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
기본 위치로 설정한다.
플렉스(flex) 레이아웃에서만 사용된다. 플렉스 컨테이너의 기본 시작 또는 교차 시작 측면에서 해당하는 정렬 컨텐이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
레이아웃 항목을 부모 요소에서 주축(main axis) 방향으로 콘텐츠 시작 위치에 정렬한다.
그리드 트랙(grid track)을 그리드 컨테이너(grid container)에서 로우축(row axis) 방향으로 콘텐츠 시작 위치에 정렬한다.
플렉스(flex) 레이아웃에서만 사용된다. 필요에 따라 플렉스 컨테이너의 기본 끝 또는 교차 끝 측면에 해당하는 정렬 컨테이너의 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
레이아웃 항목을 부모 요소에서 주축(main axis) 방향으로 콘텐츠가 끝나는 위치에 정렬한다.
그리드 트랙(grid track)을 그리드 컨테이너(grid container)에서 로우축(row axis) 방향으로 콘텐츠가 끝나는 위치에 정렬한다.
적절한 축에서 정렬 컨테이너의 시작 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
그리드 트랙(grid track)을 그리드 컨테이너(grid container)에서 로우축(row axis) 방향으로 콘텐츠가 시작되는 위치에 정렬한다.
정렬 컨테이너 내에서 정렬 대상들을 가운데 배치한다.
레이아웃 항목을 주축(main axis) 방향으로 부모 요소에서 가운데에 정렬한다.
그리드 트랙(grid track)을 그리드 컨테이너(grid container) 로우축(row axis) 방향으로 가운데 위치에 정렬한다.
적절한 축에서 정렬 컨테이너의 끝 가장자리와 같은 높이가 되도록 정렬 대상을 정렬한다.
그리드 트랙(grid track)을 그리드 컨테이너(grid container) 로우축(row axis) 방향으로에서 콘텐츠가 끝나는 위치에 정렬한다.
정렬 컨테이너의 왼쪽 또는 실제 왼쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.
로우축(row axis)에서 레이아웃 항목들이 왼쪽 가장자리에 맞추어 같은 높이를 정렬된다. 조건에 따라 start
와 동일하게 동작한다고 명세에 설명이 있지만 현재로서는 조건과 관계없이 start와 동일하다.
정렬 컨테이너의 오른쪽 또는 물리적 오른쪽 가장자리 중 적절한 축에 있는 것과 같은 높이로 정렬 대상을 정렬한다.
로우축(row axis)에서 레이아웃 항목들이 오른쪽 가장자리에 맞추어 같은 높이를 정렬된다. 조건에 따라 end와 동일하게 동작한다고 명세에 설명이 있지만 현재로서는 조건과 관계없이 end와 동일하다.
정렬 대상은 정렬 컨테이너 안에서 고르게 배치된다. 첫번째 정렬 대상은 정렬 컨테이너의 시작 모서리와 같은 높이로 배치되고 마지막 정렬 대상은 정렬 컨테이너의 끝 모서리와 같은 높이로 배치된다. 나머지 정렬 대상은 시작과 끝 정렬 대상 사이에서 필요에 따라 간격이 균등하게 배분되어 배치된다.
각 플렉스 컨테이너(flex container)가 주축(cross axis)을 따라서 부모 요소 내에서 균등하게 배치된다. 각 플렉스 컨테이너(flex container)의 주축 방향 크기는 플렉스 컨테이너(flex container)의 레이아웃 항목중 최대 콘텐츠를 가지고 있는 크기에 맞춘다. 그리고 플렉스 컨테이너(flex container)내의 레이아웃 항목은 플렉스 컨테이너(flex container)에 맞추어 크기를 갖는다.
컬럼축(column axis) 그리드 트랙(grid track)이 그리드 컨테이너(grid container) 안에서 로우축(row axis) 방향으로 균등하게 배치된다.
기본적으로 space-between와 동일하지만 양쪽 끝에도 형성된 간격의 1/2 간격을 각각 갖는다.
플렉스 컨테이너(flex container)가 주축(main axis)을 따라서 부모 요소 내에서 균등하게 배치된다. 각 플렉스 컨테이너(flex container)의 레이아웃 항목의 주축 방향 크기는 플렉스 컨테이너(flex container)의 레이아웃 항목중 최대 콘텐츠를 가지고 있는 크기에 맞춘다. 그리고 플렉스 컨테이너(flex container)내의 레이아웃 항목은 flex 컨테이너에 맞추어 크기를 갖는다.
컬럼축(column axis) 그리드 트랙(grid track)이 그리드 컨테이너(grid container) 안에서 로우축(row axis) 방향으로 균등하게 배치된다. 그리고 로우축(row axis) 상에서 양쪽 끝에도 그리드 트랙(grid track) 내 인접 레이아웃 항목 간 간격의 1/2 간격을 갖는다.
기본적으로 space-around와 동일하지만 첫번째 정렬 대상의 이전, 마지막 정렬 대상의 이후 간격과 첫번째 정렬 대상과 마지막 정렬 대상 사이의 간격이 정렬 컨테이너 내에서 균등하도록 배치한다.
space-around
와 동일해 보이지만 주축(main axis) 상의 양쪽 끝의 flex 컨테이너가 갖는 간격이 인접 flex 컨테이너끼리 갖는 간격과 동일한 것이 다르다.
space-around
와 동일해 보이지만 로우축(row axis) 방향으로 양쪽 끝에 갖는 간격이 그리드 트랙(grid track)내 인접 레이아웃 항목간 갖는 간격과 동일한 것이 다르다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Box Alignment Module Level 3 | Last review date: 2022-6-26 | |
Flexible Box Layout Module Level 1 | 추천 후보 | Last review date: 2022-6-16 |