Flex 레이아웃
Flex 레이아웃
Flex 레이아웃은 일관된 간격의 커스텀 레이아웃을 만들어 주는 레이아웃이에요. 다른 레이아웃과 PatternFly 컴포넌트에 반응하면서 자식 요소를 자유롭게 정렬할 수 있게 해 줘요.
출처: 문서
본문
Flex 기본 (Flex basics)
기본 (Basic)
- Flex item
- Flex item
- Flex item
- Flex item
- Flex item
중첩 (Nesting)
- Flex item
- Flex item
- Flex item
- Flex item
- Flex item
항목과 함께 중첩 (Nested with items)
- Flex item
- Flex item
- Flex item
- Flex item
- Flex item
간격 (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 시스템으로 적용한 다른 간격 설정을 모두 재정의합니다.
Flex 간격 (Flex spacing)
개별 간격 (Individually spaced)
- Item - none
- Item - xs
- Item - sm
- Item - md
- Item - lg
- Item - xl
- Item - 2xl
- Item - 3xl
Spacing xl
- Flex item
- Flex item
- Flex item
- Flex item
- Flex item
Spacing none
- Flex item
- Flex item
- Flex item
- Flex item
- Flex item
Flex gap 간격 (Flex gap spacing)
행 간격 (Row gap)
- Flex item × 10
열 간격 (Column gap)
- Flex item × 10
간격 (Gap)
- Flex item × 10
Flex 레이아웃 modifier (Flex layout modifiers)
기본 레이아웃 (Default layout)
- Flex item × 5
인라인 (Inline)
- Flex item × 5
canGrow 사용 (Using canGrow)
- Flex item × 6
너비 조정 (Adjusting width)
- Flex item × 6
컬럼 너비 지정 (Specifying column widths)
- Flex item × 6
컬럼 레이아웃 modifier (Column layout modifiers)
컬럼 레이아웃 (Column layout)
- Flex item × 3
요소 쌓기 (Stacking elements)
- Flex item × 6
컬럼에 요소 중첩 (Nesting elements in columns)
- Flex item × 5
반응형 레이아웃 modifier (Responsive layout modifiers)
direction column과 row 전환 (Switching between direction column and row)
- Flex item × 6
텍스트 너비 제어 (Controlling width of text)
- Flex item
- <Lorem ipsum placeholder 텍스트>
- Flex item
- Flex item
Flex 정렬 (Flex alignment)
오른쪽 정렬 (Aligning right)
- Flex item × 5
단일 항목 오른쪽 정렬 (Align right on single item)
- Flex item × 2
여러 그룹 오른쪽 정렬 (Align right on multiple groups)
- Flex item × 6
인접 콘텐츠 정렬 (Align adjacent content)
- Flex item × 6
align self flex end (Align self flex end)
- Flex item × 5
align self center (Align self center)
- Flex item × 5
align self baseline (Align self baseline)
- Flex item × 5
align self stretch (Align self stretch)
- Flex item × 5
Flex 정렬 기준 (Flex justification)
justify content flex end
- Flex item × 4
justify content space between
- Flex item × 3
justify content flex start
- Flex item × 3
Flex 항목 순서 (Flex item order)
처음·마지막 정렬 (First last ordering)
- Item A (FLEX LAST)
- Item B
- Item C (FLEX FIRST)
반응형 처음·마지막 정렬 (Responsive first last ordering)
- Item A
- Item B
- Item C
정렬 (Ordering)
- 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
반응형 정렬 (Responsive ordering)
- 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
대체 컴포넌트 (Alternative components)
- Flex item × 5
Props
Flex
| Name | Type | Default | Description |
|---|---|---|---|
| align | { default?/sm?/md?/lg?/xl?/'2xl'?: 'alignLeft' | 'alignRight' } |
다양한 breakpoint에서 margin: auto에 사용할 값 |
|
| alignContent | { default?/sm?/md?/lg?/xl?/'2xl'?: 'alignContentFlexStart' | 'alignContentFlexEnd' | 'alignContentCenter' | 'alignContentStretch' | 'alignContentSpaceBetween' | 'alignContentSpaceAround' } |
다양한 breakpoint에서 align-content 속성에 추가할 값 |
|
| alignItems | { default?/sm?/md?/lg?/xl?/'2xl'?: 'alignItemsFlexStart' | 'alignItemsFlexEnd' | 'alignItemsCenter' | 'alignItemsStretch' | 'alignItemsBaseline' } |
다양한 breakpoint에서 align-items 속성에 추가할 값 |
|
| alignSelf | { default?/sm?/md?/lg?/xl?/'2xl'?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline' } |
다양한 breakpoint에서 align-self 속성에 추가할 값 |
|
| children | React.ReactNode | null | Flex 레이아웃 안에 렌더링되는 콘텐츠 |
| className | string | '' | Flex 레이아웃에 추가되는 추가 클래스 |
| columnGap | { default?/sm?/md?/lg?/xl?/'2xl'?: 'columnGap' | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl' | 'columnGap3xl' | 'columnGap4xl' } |
다양한 breakpoint에서 열 사이의 간격. 주축의 spacer를 재정의합니다. | |
| component | React.ElementType<any> | React.ComponentType<any> | 'div' | 렌더링할 기본 컴포넌트를 설정합니다. 기본값은 div |
| direction | { default?/sm?/md?/lg?/xl?/'2xl'?: 'column' | 'columnReverse' | 'row' | 'rowReverse' } |
다양한 breakpoint에서 flex-direction 속성에 추가할 값 |
|
| display | { default?: 'inlineFlex'; sm?/md?/lg?/xl?/'2xl'?: 'flex' | 'inlineFlex' } |
다양한 breakpoint에서 display 속성에 설정할 값 |
|
| flex | { default?/sm?/md?/lg?/xl?/'2xl'?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4' } |
다양한 breakpoint에서 flex 속성에 추가할 값 |
|
| flexWrap | { default?/sm?/md?/lg?/xl?/'2xl'?: 'wrap' | 'wrapReverse' | 'nowrap' } |
다양한 breakpoint에서 flex-wrap 속성에 설정할 값 |
|
| fullWidth | { default?/sm?/md?/lg?/xl?/'2xl'?: 'fullWidth' } |
다양한 breakpoint에서 width: 100%로 설정할지 여부 |
|
| gap | { default?/sm?/md?/lg?/xl?/'2xl'?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl' } |
다양한 breakpoint에서 항목 사이의 간격. 주축의 spacer를 재정의합니다. | |
| grow | { default?/sm?/md?/lg?/xl?/'2xl'?: 'grow' } |
다양한 breakpoint에서 flex: grow를 추가할지 여부 |
|
| justifyContent | { default?/sm?/md?/lg?/xl?/'2xl'?: 'justifyContentFlexStart' | 'justifyContentFlexEnd' | 'justifyContentCenter' | 'justifyContentSpaceBetween' | 'justifyContentSpaceAround' | 'justifyContentSpaceEvenly' } |
다양한 breakpoint에서 justify-content 속성에 추가할 값 |
|
| order | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string } |
flex 레이아웃 요소의 order 속성을 수정합니다 | |
| rowGap | { default?/sm?/md?/lg?/xl?/'2xl'?: 'rowGap' | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl' | 'rowGap3xl' | 'rowGap4xl' } |
다양한 breakpoint에서 행 사이의 간격. 주축의 spacer를 재정의합니다. | |
| shrink | { default?/sm?/md?/lg?/xl?/'2xl'?: 'shrink' } |
다양한 breakpoint에서 flex: shrink를 추가할지 여부 |
|
| spaceItems | { default?/sm?/md?/lg?/xl?/'2xl'?: 'spaceItemsNone' | 'spaceItemsXs' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg' | 'spaceItemsXl' | 'spaceItems2xl' | 'spaceItems3xl' | 'spaceItems4xl' } |
다양한 breakpoint에서 항목 간격(spacing) | |
| spacer | { default?/sm?/md?/lg?/xl?/'2xl'?: 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl' } |
다양한 breakpoint에서의 spacer |
FlexItem
| Name | Type | Default | Description |
|---|---|---|---|
| align | { default?/sm?/md?/lg?/xl?/'2xl'?: 'alignLeft' | 'alignRight' } |
다양한 breakpoint에서 margin: auto에 사용할 값 |
|
| alignSelf | { default?/sm?/md?/lg?/xl?/'2xl'?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline' } |
다양한 breakpoint에서 align-self 속성에 추가할 값 |
|
| children | React.ReactNode | null | Flex 레이아웃 안에 렌더링되는 콘텐츠 |
| className | string | '' | Flex 레이아웃에 추가되는 추가 클래스 |
| component | React.ElementType<any> | React.ComponentType<any> | 'div' | 렌더링할 기본 컴포넌트를 설정합니다. 기본값은 div |
| flex | { default?/sm?/md?/lg?/xl?/'2xl'?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4' } |
다양한 breakpoint에서 flex 속성에 추가할 값 |
|
| fullWidth | { default?/sm?/md?/lg?/xl?/'2xl'?: 'fullWidth' } |
다양한 breakpoint에서 width: 100%로 설정할지 여부 |
|
| grow | { default?/sm?/md?/lg?/xl?/'2xl'?: 'grow' } |
다양한 breakpoint에서 flex: grow를 추가할지 여부 |
|
| order | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string } |
flex 레이아웃 요소의 order 속성을 수정합니다 | |
| shrink | { default?/sm?/md?/lg?/xl?/'2xl'?: 'shrink' } |
다양한 breakpoint에서 flex: shrink를 추가할지 여부 |
|
| spacer | { default?/sm?/md?/lg?/xl?/'2xl'?: 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl' } |
다양한 breakpoint에서의 spacer |