Flex 레이아웃

Flex 레이아웃 (CSS 변수)

Flex 레이아웃에서 사용하는 CSS 변수를 정리한 문서예요. display, 정렬, 간격(spacer/gap)을 토큰으로 제어할 수 있어요.

출처: 문서

본문

기본 CSS 변수

값 체인 (token chain)

• --pf-v6-l-flex--spacer--column--base → --pf-t--global--spacer--gutter--default → --pf-t--global--spacer--md → --pf-t--global--spacer--300 → 1rem
• --pf-v6-l-flex--spacer--row--base → --pf-t--global--spacer--sm → --pf-t--global--spacer--200 → 0.5rem
• --pf-v6-l-flex--RowGap → --pf-v6-l-flex--spacer--row--base → --pf-t--global--spacer--sm → --pf-t--global--spacer--200 → 0.5rem
• --pf-v6-l-flex--ColumnGap → 0
• --pf-v6-l-flex--spacer--column → var(--pf-v6-l-flex--spacer, --pf-v6-l-flex--spacer--column--base) → initial, --pf-v6-l-flex--spacer--column--base → initial, --pf-t--global--spacer--gutter--default → initial, 1rem
• --pf-v6-l-flex--spacer--row → var(--pf-v6-l-flex--spacer, --pf-v6-l-flex--spacer--row--base) → initial, --pf-v6-l-flex--spacer--row--base → initial, --pf-t--global--spacer--sm → initial, 0.5rem

gap modifier 변수

체인:

• --pf-v6-l-flex--m-gap--RowGap / --pf-v6-l-flex--m-row-gap--RowGap → --pf-v6-l-flex--spacer--row--base → --pf-t--global--spacer--sm → --pf-t--global--spacer--200 → 0.5rem
• --pf-v6-l-flex--m-gap--ColumnGap / --pf-v6-l-flex--m-column-gap--ColumnGap → --pf-v6-l-flex--spacer--column--base → --pf-t--global--spacer--gutter--default → --pf-t--global--spacer--md → --pf-t--global--spacer--300 → 1rem

spacer 스케일

--pf-v6-l-flex--spacer--{size} 변수는 선택자 .pf-v6-l-flex/.pf-v6-l-flex .pf-m-spacer-{size}/.pf-v6-l-flex.pf-m-space-items-{size}에 사용됩니다.

space-items modifier

• .pf-v6-l-flex.pf-m-space-items-{size} > * → --pf-v6-l-flex--spacer는 위 스케일의 값을 사용합니다.
• .pf-v6-l-flex.pf-m-space-items-{size} > :last-child → --pf-v6-l-flex--spacer는 0입니다.
• .pf-v6-l-flex.pf-m-space-items-none > * → --pf-v6-l-flex--spacer → --pf-v6-l-flex--spacer--none → 0

개별 항목 spacer modifier

• .pf-v6-l-flex .pf-m-spacer-{size} 및 .pf-v6-l-flex .pf-m-spacer-{size}:last-child → --pf-v6-l-flex--spacer는 위 스케일의 값을 그대로 사용합니다 (none/xs 이후에는 :last-child도 동일한 값을 유지합니다).

gap modifier 상세

각 gap modifier는 --pf-v6-l-flex--RowGap/--pf-v6-l-flex--ColumnGap을 해당 spacer 스케일 값으로 설정합니다:

.pf-v6-l-flex:is(.pf-m-gap, .pf-m-gap-none, ... .pf-m-gap-4xl) > *에서 --pf-v6-l-flex--spacer--row와 --pf-v6-l-flex--spacer--column은 모두 0이 됩니다 (gap이 spacing 시스템을 재정의).

row-gap / column-gap modifier

.pf-v6-l-flex:is(.pf-m-row-gap, ...) > *에서 --pf-v6-l-flex--spacer--row는 0이 됩니다. .pf-v6-l-flex:is(.pf-m-column-gap, ...) > *에서 --pf-v6-l-flex--spacer--column은 0이 됩니다.

더 알아보기 (Learn more)