FlexBox

FlexBox는 flex 레이아웃을 컴포넌트 형태로 사용할 수 있는 유틸리티 컴포넌트입니다.

Introduce

display: flex; 레이아웃을 컴포넌트화 하여 사용할 수 있습니다.

Item 1

Item 2

Item 3

import { FlexBox } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox flexWrap="wrap" gap="6px">
      <FlexBox>Item 1</FlexBox>
      <FlexBox>Item 2</FlexBox>
      <FlexBox>Item 3</FlexBox>
    </FlexBox>
  )
}

export default Demo;

API

as 옵션을 통해 Link, section 등 다른 컴포넌트/태그로 활용할 수 있습니다.

정해진 breakpoint에 따라 아래 옵션을 override 할 수 있습니다.

flex
flexGrow
flexShrink
flexBasis
alignSelf
flexDirection
flexWrap
justifyContent
alignItems
alignContent
gap
rowGap
columnGap
order

Name	Types	defaultValue
`as`	`ElementType`	`-`
`flexDirection`	`Property.FlexDirection \| undefined`	`-`
`flexWrap`	`Property.FlexWrap \| undefined`	`-`
`justifyContent`	`Property.JustifyContent \| undefined`	`-`
`alignItems`	`Property.AlignItems \| undefined`	`-`
`alignContent`	`Property.AlignContent \| undefined`	`-`
`order`	`Property.Order \| undefined`	`-`
`flex`	`Property.Flex<string \| number> \| undefined`	`-`
`flexGrow`	`Property.FlexGrow \| undefined`	`-`
`flexShrink`	`Property.FlexShrink \| undefined`	`-`
`flexBasis`	`Property.FlexBasis<string \| number> \| undefined`	`-`
`alignSelf`	`Property.AlignSelf \| undefined`	`-`
`gap`	`Property.Gap<string \| number> \| undefined`	`-`
`rowGap`	`Property.RowGap<string \| number> \| undefined`	`-`
`columnGap`	`Property.ColumnGap<string \| number> \| undefined`	`-`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Omit<FlexBoxDefaultProps, "children" \| "sx">, { sx?: CSSInterpolation; }> \| undefined`	`-`