Flexbox(CSS 가변 상자 레이아웃)는 컨테이너(Flex 컨테이너라고 함)에서 요소를 유연하게 정렬할 수 있는 방법입니다. 컨테이너 내의 요소(Flex 항목이라고 함)는 지정된 순서와 간격을 유지하면서 컨테이너 공간을 최적화하기 위해 확장 또는 축소될 수 있습니다. 크기가 큰 항목이 작은 항목보다 더 큰 공간을 차지하도록 하면서 다양한 크기의 항목을 행 또는 열에 맞춰 정렬하려는 경우에 Flexbox가 특히 유용할 수 있습니다.
Flexbox 설정
Flexbox 탭의 반응형 패널에서 Flexbox 설정을 찾을 수 있습니다.
Flexbox 사용
Flexbox를 사용하려면 Flexbox 사용 체크박스를 선택합니다. 현재의 상위 요소가 Flex 컨테이너가 되고 반응형 패널에서 Flexbox 속성을 사용할 수 있게 됩니다.
다음과 같은 경우 Flexbox를 사용할 수 없습니다.
- 현재 상위 요소는
<p>또는<h1>과 같은 텍스트 요소입니다. - 현재 상위 요소에는
<span>또는<a>와 같은 인라인 요소가 포함되어 있습니다. 상위 요소가 페이지인 경우에는 적용되지 않습니다.
Flex 컨테이너의 직접 하위 요소는 Flex 항목이 됩니다. (가이드 레이어는 제외됩니다.) Flex 항목은 기본축을 따라 정렬되며, 기본축은 가로 또는 세로로 설정할 수 있습니다. 또한 축을 따라가는 콘텐츠 흐름의 방향도 구성할 수도 있습니다. Flexbox 방향과 경로는 변경할 수 있으므로 속성은 위, 아래, 왼쪽, 오른쪽이 아닌 'flex-start', 'flex-end'와 같은 값으로 설정됩니다.
방향
방향 설정은 기본축과 축을 따라가는 흐름의 방향을 설정하여 Flex 항목이 정렬되는 방식을 결정합니다.
| 방향 | 동작 | 기본축 |
|---|---|---|
| row | Flex 항목이 텍스트 흐름 방향(영어와 같이 왼쪽에서 오른쪽으로 쓰는 언어의 경우 왼쪽에서 시작)으로 행에 따라 정렬됩니다. |
가로 |
| row-reverse | Flex 항목이 텍스트 흐름 역방향(영어와 같이 왼쪽에서 오른쪽으로 쓰는 언어의 경우 오른쪽에서 시작)으로 행에 따라 정렬됩니다. |
가로 |
| column | Flex 항목이 콘텐츠 흐름 방향(일반적으로 맨 위부터)으로 열에 따라 정렬됩니다. |
세로 |
| column-reverse | Flex 항목이 콘텐츠 흐름 역방향(일반적으로 하단부터)으로 열에 따라 정렬됩니다. |
세로 |
간격
간격은 Flex 항목의 간격을 자동으로 배치할지, 아니면 고정된 거리를 사용할지 여부를 설정합니다.
| 간격 | 동작 |
|---|---|
| Standard | Flex 항목이 지정된 양쪽 맞춤, 줄 바꿈, 정렬 설정에 맞춰 Flex 컨테이너 내에 자동으로 정렬됩니다. |
| Fixed | Flex 항목이 지정된 하위 간격 및 경계 간격에 맞춰 정렬됩니다. |
양쪽 맞춤
양쪽 맞춤은 Flex 항목이 기본축을 따라 정렬되는 방식을 결정합니다. 이 설정은 표준 간격을 사용하는 경우 사용할 수 있습니다.
| 양쪽 맞춤 | 동작 |
|---|---|
| flex-start | Flex 항목이 행 또는 열이 시작되는 가장자리에 정렬됩니다. |
| flex-end | Flex 항목이 행 또는 열이 끝나는 가장자리에 정렬됩니다. |
| center | Flex 항목이 기본축을 따라 중앙에 정렬됩니다. |
| space-between | Flex 항목이 기본축을 따라 컨테이너의 가장자리에서 시작 항목과 종료 항목 사이에 간격을 두고 균등하게 배치됩니다. |
| space-around | Flex 항목이 기본축을 따라 균일한 간격으로 배치되고 양쪽 끝에 각각 절반의 공간을 배치합니다. |
| space-evenly | Flex 항목이 시작 항목과 종료 항목 양쪽에 같은 크기의 공간을 두고 기본축을 따라 균등하게 배치됩니다. |
교차축 정렬
교차축 정렬은 현재 행 또는 열의 교차축을 따라 Flex 항목이 정렬되는 방식입니다.
| 교차축 정렬 | 동작 |
|---|---|
| flex-start | Flex 항목이 교차축이 시작되는 가장자리에 배치됩니다. |
| flex-end | Flex 항목이 교차축이 끝나는 가장자리에 배치됩니다. |
| center | Flex 항목이 교차축을 따라 중앙에 정렬됩니다. |
| stretch | Flex 항목이 교차축을 따라 사용 가능한 공간을 채우도록 늘어납니다. |
| baseline | Flex 항목이 서로의 기준이 정렬되도록 교차축을 따라 배치됩니다. |
줄 바꿈
래핑에 따라 콘텐츠가 컨테이너 내에서 래핑되는지 여부가 결정됩니다. 이 설정은 표준 간격을 사용하는 경우 사용할 수 있습니다.
| 줄 바꿈 | 동작 |
|---|---|
| nowrap | Flex 항목이 단일 행 또는 단일 열로 정렬됩니다. |
| wrap | Flex 항목이 한 줄에 넣을 수 없을 정도로 큰 경우 여러 행 또는 열을 형성하도록 줄 바꿈할 수 있습니다. |
| wrap-reverse | Flex 항목이 한 줄에 넣을 수 없을 정도로 큰 경우 여러 행 또는 열을 형성하도록 줄 바꿈할 수 있습니다. 단, 교차축 방향이 반대입니다. |
줄 바꿈 정렬
줄 바꿈 정렬은 Flex 컨테이너에 여러 개의 행 또는 열이 있는 경우 교차축을 따라 행 또는 열이 정렬되는 방식(기본축과 직각)을 설정합니다. 이 설정은 표준 간격을 사용하고 줄 바꿈을 사용 설정한 경우에 사용할 수 있습니다.
| 줄 바꿈 정렬 | 동작 |
|---|---|
| flex-start | 컨테이너가 시작되는 가장자리에 행 또는 열이 정렬됩니다. |
| flex-end | 컨테이너가 끝나는 가장자리에 행 또는 열이 정렬됩니다. |
| center | 행 또는 열이 교차축을 따라 중앙에 표시됩니다. |
| stretch | 지정된 높이가 없는 경우 교차축을 따라 사용 가능한 공간을 채우도록 행 또는 열이 늘어납니다. |
| space-between | 컨테이너의 가장자리에서 시작하고 끝나는 열과 행에 맞춰 교차축을 따라 열과 행이 균등하게 배치됩니다. |
| space-around | 행 또는 열이 교차축을 따라 균등한 간격으로 배치되며 양쪽 끝에는 각각 절반의 공간이 배치됩니다. |
하위 간격
Flex 컨테이너의 두 항목 간에 유지되는 픽셀의 거리입니다. 이 설정은 고정 간격을 사용할 때 사용할 수 있습니다.
경계 간격
외부 항목과 Flex 컨테이너 간에 유지되는 픽셀의 거리입니다. 이 설정은 고정 간격을 사용할 때 사용할 수 있습니다.
하위 순서
Flexbox에 포함된 요소가 여기에 표시됩니다. 순서를 바꾸려면 항목을 목록의 새 위치로 드래그합니다.
스테이지에서 Flex 항목을 이동하여 순서를 변경할 수도 있습니다.
Flexbox 하위 속성
Flex 항목에는 자체 속성이 있습니다. Flexbox 설정을 보고 수정하려면 하위 항목을 선택합니다.
Flex 항목은 크기가 확장되거나 축소될 수 있지만 최소 및 최대 너비와 높이를 따릅니다. Flex 항목은 Flexbox 설정에 따라 정렬되므로 왼쪽 및 상단 속성이 사용 중지되지만, 변환 속성을 사용하여 위치를 오프셋할 수 있습니다.
교차축 정렬
Flex 항목의 교차축 정렬이 컨테이너에 설정된 기본 교차축 정렬을 덮어씁니다.
| 교차축 정렬 | 동작 |
|---|---|
| auto | Flex 항목이 Flex 컨테이너의 교차축 정렬 설정을 사용합니다. |
| baseline | Flex 항목의 기준이 기준 정렬을 사용하는 다른 Flex 항목의 기준에 맞춰 정렬됩니다. |
| center | Flex 항목이 교차축의 중앙에 배치됩니다. |
| flex-end | Flex 항목이 컨테이너가 끝나는 가장자리에서 교차축을 따라 배치됩니다. |
| flex-start | Flex 항목이 컨테이너가 시작하는 가장자리에서 교차축을 따라 배치됩니다. |
| stretch | 지정된 높이가 없는 경우 가면 항목이 교차축을 따라 컨테이너를 채우도록 늘어납니다. |
Flex 확장
Flex 확장 인수는 동일한 행 또는 열에 있는 다른 항목의 Flex 확장 인수에 비례하여 Flex 컨테이너의 기본 가용 공간을 채우도록 Flex 항목의 증가 정도를 결정합니다. 이 설정은 표준 간격을 사용하는 경우 사용할 수 있습니다.
예를 들어 하나의 행에 Flex 확장 인수가 1, 1, 2인 Flex 항목 3개가 포함된 경우, 마지막 Flex 항목은 다른 Flex 항목보다 해당 행에서 사용 가능한 공간을 두 배 더 많이 차지합니다.
행 또는 열의 항목에 대한 모든 Flex 확장 인수가 1보다 작은 경우, Flex 항목은 사용 가능한 공간을 모두 사용하지 못할 수 있습니다.
Flex 확장 인수가 0이면 Flex 항목이 확장되지 않습니다.
Flex 축소
Flex 축소 인수는 동일한 축 또는 다른 열에 있는 다른 항목의 Flex 축소 인수에 비례하여 기본 축을 따라서 Flex 컨테이너에 맞도록, Flex 항목이 축소되는 정도를 결정합니다. 이 설정은 표준 간격을 사용하는 경우 사용할 수 있습니다.
예를 들어 하나의 행에 Flex 축소 인수가 1, 1, 2인 Flex 항목 3개가 포함된 경우, 마지막 Flex 항목은 다른 Flex 항목에 비해 더 축소됩니다. Flex 축소 인수는 Flex 항목의 크기를 고려합니다.
Flex 축소 인수가 0이면 Flex 항목이 축소되지 않습니다.