Flex 레이아웃
Flex 레이아웃 (HTML)
Flex 레이아웃의 HTML 문서예요. CSS Flex 속성을 기반으로 flex 항목이 컨테이너의 사용 가능한 공간에 맞춰 어떻게 커지거나 줄어드는지를 다뤄요.
출처: 문서
본문
소개 (Introduction)
Flex 레이아웃은 CSS Flex 속성을 기반으로, flex 항목이 컨테이너의 사용 가능한 공간에 맞춰 어떻게 grow하거나 shrink하는지를 결정합니다. 기본적으로 flex 레이아웃은 spacing 시스템으로 주축(main axis)을 따라 자식을 간격 두고, gap spacing으로 줄바꿈되는 자식을 교차축(cross axis)을 따라 간격 둡니다. flex-wrap은 wrap으로, align-items는 baseline으로 설정됩니다. Flex 레이아웃은 무한히 중첩할 수 있으며, 항목을 그룹화하기 위해 중첩할 수도 있습니다.
간격 (Spacing)
Flex 레이아웃은 직접 자식을 간격을 두는 두 가지 방법을 제공합니다.
- Spacing system: spacing 시스템은 flex 레이아웃의 직접 자식 사이에 margin을 적용하여 주축(main axis)을 따라서만 항목 사이 공간을 만듭니다. spacing 시스템의 장점은 직접 자식 사이에 가변 간격을 허용한다는 점이에요. 주축을 따라 있는 개별 flex 항목이 형제 항목과 다른 spacer가 필요할 때 spacing 시스템을 사용하세요.
- Gap spacing: gap spacing은 flex gap을 사용해 flex 레이아웃의 직접 자식을 간격을 두며, 행(row-gap), 열(column-gap), 또는 둘 다(gap)에 간격을 적용할 수 있어요. gap spacing의 장점은 항목 줄바꿈이 개선되고 CSS flex의 논리적 레이아웃 속성과 더 잘 맞는 향상된 항목 간격을 제공한다는 점이에요. 예를 들어 논리적 속성에 의존하는 RTL 레이아웃의 간격이 개선됩니다. 모든 직접 자식이 행·열·또는 둘 다에 동일한 spacer를 사용해야 할 때 gap 시스템을 사용하세요.
- 참고: 주축을 따라 gap을 사용하면 spacing 시스템으로 적용한 다른 간격 설정을 모두 재정의합니다.
Breakpoints
-on-sm, -on-md, -on-lg, -on-xl, -on-2xl breakpoint가 제공됩니다.
유용성 (Usefulness)
- 콘텐츠가 레이아웃을 결정하고 필요할 때 요소가 줄바꿈되어야 할 때 사용하세요.
- 엄격한 그리드가 필요하지 않거나 원하지 않을 때 사용하세요.
유틸리티 클래스와의 차이 (Differences from utility class)
- 여러 CSS 선언을 포함하며
!important태그를 사용하지 않습니다. - 요소를 column이나 row로 감쌀 필요가 없습니다.
- 각 자식에 유틸리티 클래스를 추가해야 하는 의존성을 없앱니다.
- 컨테이너 요소나 컴포넌트에 적용할 수 있습니다.
기본 flex 레이아웃 (Basic flex layout)
기본 flex 예시 (Basic flex example)
- Flex item × 4
중첩 flex 예시 (Nested flex example)
- Flex item × 5
중첩 flex와 항목 예시 (Nested flex and items example)
- Flex item × 5
기본 flex 레이아웃 개요 (Basic flex layout overview)
이 CSS 접근 방식은 기본 클래스 속성의 특이성(specificity)을 낮게 유지하고 더 높은 특이성에서 CSS 변수 값을 재설정함으로써, 단일 선택자(특이성 10 이상)로도 어떤 spacer 속성도 덮어쓸 수 있게 합니다.
기본 flex 레이아웃 사용 (Basic flex layout usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-v6-l-flex |
* |
flex 레이아웃을 시작합니다. 필수 |
.pf-v6-l-flex__item |
.pf-v6-l-flex > * |
flex 항목을 시작합니다. 필수 |
Spacing 시스템 (Spacing system)
부모에 적용하는 예시 (Spacing system on parent example)
- Flex item × 5
자식에 적용하는 예시 (Spacing system on children example)
- Item - none
- Item - xs
- Item - sm
- Item - md
- Item - lg
- Item - xl
- Item - 2xl
- Item - 3xl
- Item - 4xl
부모와 자식 모두에 적용하는 예시 (Spacing system on parent and children example)
- Flex item
- Flex item - md
- Flex item
- Flex item
- Flex item
Spacing 시스템 사용 (Spacing system usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 주축을 따라 직접 자식 사이의 spacer를 수정합니다. |
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]} |
.pf-v6-l-flex > * |
flex 레이아웃의 주축을 따라 개별 직접 자식의 spacer를 수정합니다. |
Gap spacing
행 간격 예시 (Row gap example)
- Flex item × 16
열 간격 예시 (Column gap example)
- Flex item × 16
간격 예시 (Gap example)
- Flex item × 16
Gap spacing 사용 (Gap spacing usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]} |
.pf-v6-l-flex |
열과 행 사이의 공간을 수정합니다. |
.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]} |
.pf-v6-l-flex |
행 사이의 공간을 수정합니다. |
.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]} |
.pf-v6-l-flex |
열 사이의 공간을 수정합니다. |
레이아웃 modifier (Layout modifiers)
기본 레이아웃 예시 (Default layout example)
- Flex item × 3
인라인 flex 레이아웃 예시 (Inline flex layout example)
- Flex item × 3
기본 flex grow 예시 (Basic flex grow example)
.pf-m-grow로 너비를 조정합니다. 이 클래스는 flex-grow: 1로 설정합니다. 이 예시에서 첫 번째 그룹은 .pf-m-grow로 설정되었고 나머지 사용 가능한 공간을 차지합니다.
- Flex item × 6
Flex grow 1 예시 (Flex grow 1 example)
.pf-m-flex-1로 너비를 조정합니다. 이 예시에서 모든 그룹은 .pf-m-flex-1로 설정되었습니다. 사용 가능한 공간을 동등하게 공유합니다.
- Flex item × 6
Flex grow 1-4 예시 (Flex grow 1-4 example)
- Flex item × 7
레이아웃 modifier 사용 (Layout modifiers usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-inline-flex{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 display 속성을 inline-flex로 수정합니다. |
.pf-m-grow{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex-grow 속성을 1로 수정합니다. |
.pf-m-shrink{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex-shrink 속성을 1로 수정합니다. |
.pf-m-full-width{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목을 부모의 전체 너비로 수정합니다. |
.pf-m-flex-1{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약(shorthand) 속성을 1 0 0으로 수정합니다. |
.pf-m-flex-2{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 2 0 0으로 수정합니다. |
.pf-m-flex-3{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 3 0 0으로 수정합니다. |
.pf-m-flex-4{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 4 0 0으로 수정합니다. |
.pf-m-flex-default{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 0 1 auto로 재설정합니다. |
.pf-m-flex-none{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 none으로 수정합니다. |
컬럼 레이아웃 modifier (Column layout modifiers)
기본 컬럼 예시 (Basic column example)
- Flex item × 3
중첩 컬럼 예시 (Nested column example)
- Flex item × 14
사용 (Usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-column{-on-[breakpoint]} |
.pf-v6-l-flex |
flex-direction 속성을 column으로 수정합니다. |
반응형 레이아웃 (Responsive layouts)
flex direction 반응형 예시 (Flex direction responsive example)
- Flex item × 7
- (줄바꿈이 일어날 만큼 긴 텍스트는 인접 항목의 너비를 강제로 줄바꿈시킵니다. 콘텐츠가 줄바꿈될 가능성이 있다면 너비를 제어하기 위해 modifier를 사용해야 해요. Lorem ipsum placeholder 텍스트)
- Flex item × 3
- flex 항목의 너비를 제어하려면
.pf-m-flex-1을 설정하세요. (Lorem ipsum placeholder 텍스트) - Flex item × 2
반응형 레이아웃 사용 (Responsive layouts usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-column{-on-[breakpoint]} |
.pf-v6-l-flex |
flex-direction 속성을 column으로 수정합니다. |
.pf-m-row{-on-[breakpoint]} |
.pf-v6-l-flex |
flex-direction 속성을 row로 수정합니다. |
정렬 (Alignment)
기본 오른쪽 정렬 예시 (Basic align right example)
.pf-m-align-right로 오른쪽 정렬. 이 해법은 margin-inline-start: auto를 설정하여 요소를 항상 오른쪽으로 정렬하며, 줄바꿈될 때도 마찬가지입니다.
- Flex item × 5
단일 항목 오른쪽 정렬 예시 (Align right on single item example)
- Flex item × 2
여러 그룹 오른쪽 정렬 예시 (Align right on multiple groups example)
무제 예시 (Untitled example)
- Flex item × 6
.pf-m-flex-1을 사용한 정렬 예시 (Alignment using .pf-m-flex-1 example)
- Flex item × 6
.pf-m-align-self-flex-end를 사용한 정렬 예시
- Flex item × 5
.pf-m-align-self-center로 중첩 컬럼 정렬 예시
- Flex item × 5
.pf-m-align-self-baseline으로 중첩 컬럼 정렬 예시
- Flex item × 5
.pf-m-align-self-stretch로 중첩 컬럼 정렬 예시
- Flex item × 5
정렬 사용 (Alignment usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-align-right{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
margin-inline-start 속성을 auto로 수정합니다. |
.pf-m-align-left{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
margin-inline-start 속성을 0으로 재설정합니다. |
.pf-m-align-self-flex-start{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
align-self 속성을 flex-start로 수정합니다. |
.pf-m-align-self-flex-end{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
align-self 속성을 flex-end로 수정합니다. |
.pf-m-align-self-flex-center{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
align-self 속성을 center로 수정합니다. |
.pf-m-align-self-flex-baseline{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
align-self 속성을 baseline으로 수정합니다. |
.pf-m-align-self-flex-stretch{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
align-self 속성을 stretch로 수정합니다. |
정렬 기준 (Justification)
justify content flex end 예시
- Flex item × 4
justify content space between 예시
- Flex item × 3
justify content flex start 예시
- Flex item × 3
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-justify-content-flex-end{-on-[breakpoint]} |
.pf-v6-l-flex |
justify 속성과 하위 요소 간격을 수정합니다. |
.pf-m-justify-content-flex-space-between{-on-[breakpoint]} |
.pf-v6-l-flex |
justify 속성과 하위 요소 간격을 수정합니다. |
.pf-m-justify-content-flex-start{-on-[breakpoint]} |
.pf-v6-l-flex |
justify 속성과 하위 요소 간격을 수정하며, 주로 간격을 기본값으로 재설정하는 데 사용합니다. |
정렬 순서 (Ordering)
정렬은 중첩된 .pf-v6-l-flex와 .pf-v6-l-flex__items에 적용할 수 있어요. 항목이 정렬되는 방식에 따라 간격을 관리해야 할 수도 있습니다. order는 셀 수 없이 많은 요소에 적용될 수 있기 때문에, order는 인라인으로 --pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}처럼 설정합니다.
기본 정렬 예시 (Basic ordering example)
- Set 1, Item A
- Set 1, Item B
- Set 1, Item C
- Set 1, Item D
- Set 2, Item A
- Set 2, Item B
- Set 2, Item C
- Set 2, Item D
처음·마지막 정렬 예시 (First and last ordering example)
- Item A (FLEX)
- Item B
- Item C (FLEX)
반응형 처음·마지막 정렬 예시 (Responsive first last ordering example)
- Item A (LAST ON XS)
- Item B
- Item C (FIRST ON XS)
반응형 정렬 예시 (Responsive ordering example)
- Set 1, Item A
- Set 1, Item B
- Set 1, Item C
- Set 1, Item D
- Set 2, Item A
- Set 2, Item B
- Set 2, Item C
- Set 2, Item D
정렬 사용 (Ordering usage)
| Class | Applied to | Outcome |
|---|---|---|
--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
flex 레이아웃 요소의 order 속성을 수정합니다. |
리스트로서의 flex 레이아웃 (Flex layout as list)
- Flex item
- Flex item
- Flex item
- Flex item
문서 (Documentation)
사용 (Usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-v6-l-flex |
* |
flex 레이아웃을 시작합니다. 필수 |
.pf-v6-l-flex__item |
.pf-v6-l-flex > * |
flex 항목을 시작합니다. 필수 |
.pf-m-flex{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 display 속성을 flex로 초기화하거나 재설정합니다. |
.pf-m-inline-flex{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 display 속성을 inline-flex로 수정합니다. |
.pf-m-grow{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex-grow 속성을 1로 수정합니다. |
.pf-m-shrink{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex-shrink 속성을 1로 수정합니다. |
.pf-m-full-width{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목을 부모의 전체 너비로 수정합니다. |
.pf-m-flex-1{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 1 0 0으로 수정합니다. |
.pf-m-flex-2{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 2 0 0으로 수정합니다. |
.pf-m-flex-3{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 3 0 0으로 수정합니다. |
.pf-m-flex-4{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 4 0 0으로 수정합니다. |
.pf-m-flex-default{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 0 1 auto로 재설정합니다. |
.pf-m-flex-none{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
중첩 flex 레이아웃이나 flex 항목의 flex 축약 속성을 none으로 수정합니다. |
.pf-m-column-reverse{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 flex-direction 속성을 column-reverse로 수정합니다. |
.pf-m-row-reverse{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 flex-direction 속성을 row-reverse로 수정합니다. |
.pf-m-wrap{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 flex-wrap 속성을 wrap으로 수정합니다. |
.pf-m-wrap-reverse{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 flex-wrap 속성을 wrap-reverse로 수정합니다. |
.pf-m-nowrap{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 flex-wrap 속성을 nowrap으로 수정합니다. |
.pf-m-justify-content-flex-start{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 justify-content 속성을 flex-start로 수정합니다. |
.pf-m-justify-content-flex-end{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 justify-content 속성을 flex-end로 수정합니다. |
.pf-m-justify-content-center{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 justify-content 속성을 center로 수정합니다. |
.pf-m-justify-content-space-between{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 justify-content 속성을 space-between으로 수정합니다. |
.pf-m-justify-content-space-around{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 justify-content 속성을 space-around로 수정합니다. |
.pf-m-justify-content-space-evenly{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 justify-content 속성을 space-evenly로 수정합니다. |
.pf-m-align-items-flex-start{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-items 속성을 flex-start로 수정합니다. |
.pf-m-align-items-flex-end{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-items 속성을 flex-end로 수정합니다. |
.pf-m-align-items-center{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-items 속성을 center로 수정합니다. |
.pf-m-align-items-stretch{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-items 속성을 stretch로 수정합니다. |
.pf-m-align-items-baseline{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-items 속성을 baseline으로 수정합니다. |
.pf-m-align-content-flex-start{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-content 속성을 flex-start로 수정합니다. |
.pf-m-align-content-flex-end{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-content 속성을 flex-end로 수정합니다. |
.pf-m-align-content-center{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-content 속성을 center로 수정합니다. |
.pf-m-align-content-stretch{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-content 속성을 stretch로 수정합니다. |
.pf-m-align-content-space-between{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-content 속성을 space-between으로 수정합니다. |
.pf-m-align-content-space-around{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃의 align-content 속성을 space-around로 수정합니다. |
.pf-m-align-left{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
flex 레이아웃 요소의 margin-inline-start 속성을 0으로 재설정합니다. |
.pf-m-align-right{-on-[breakpoint]} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
flex 레이아웃 요소의 margin-inline-start 속성을 auto로 수정합니다. |
--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order} |
.pf-v6-l-flex > .pf-v6-l-flex, .pf-v6-l-flex__item |
flex 레이아웃 요소의 order 속성을 수정합니다. |
Spacer 시스템 사용 (Spacer system usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]} |
.pf-v6-l-flex |
flex 레이아웃을 수정하여 주축의 항목 사이에 공간을 추가합니다. |
.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]} |
.pf-v6-l-flex, .pf-v6-l-flex > .pf-v6-l-flex__item |
flex 레이아웃의 주축을 따라 어떤 직접 자식의 spacer도 수정합니다. |
Gap spacing 사용 (Gap spacing usage)
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]} |
.pf-v6-l-flex |
열과 행 사이의 공간을 수정합니다. |
.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]} |
.pf-v6-l-flex |
행 사이의 공간을 수정합니다. |
.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]} |
.pf-v6-l-flex |
열 사이의 공간을 수정합니다. |