Flex

Flex 컴포넌트는 flexbox를 사용하며 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

import { Flex } from "@seed-design/react";

export default function FlexPreview() {
  return (
    <Flex direction="row" bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
      <Flex
        direction="column"
        bg="bg.brandSolid"
        gap="x1_5"
        px="x2"
        py="x2"
        flexGrow={1}
        borderRadius="r2"
      >
        <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
          1
        </Flex>
        <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
          2
        </Flex>
      </Flex>
      <Flex
        direction="row"
        bg="bg.brandSolid"
        gap="x1_5"
        px="x2"
        py="x2"
        flexGrow={1}
        borderRadius="r2"
      >
        <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
          3
        </Flex>
        <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
          4
        </Flex>
      </Flex>
      <Flex bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        5
      </Flex>
    </Flex>
  );
}

Props

Prop

Type

color?(string & {}) | ScopedColorFg | ScopedColorPalette | undefined

background?(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined

backgroundGradient?

"glowMagic" | "glowMagicPressed" | "highlightMagic" | "highlightMagicPressed" | "shimmerMagic" | "shimmerNeutral" | undefined

borderColor?(string & {}) | ScopedColorPalette | ScopedColorStroke | undefined

borderWidth?0 | (string & {}) | 1 | undefined

borderTopWidth?0 | (string & {}) | 1 | undefined

borderRightWidth?0 | (string & {}) | 1 | undefined

borderBottomWidth?0 | (string & {}) | 1 | undefined

borderLeftWidth?0 | (string & {}) | 1 | undefined

borderRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderTopLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderTopRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderBottomRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderBottomLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

boxShadow?(string & {}) | "s1" | "s2" | "s3" | undefined

width?

ResponsiveValue<Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "full"> | undefined

minWidth?

ResponsiveValue<Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "full"> | undefined

maxWidth?

ResponsiveValue<Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "full"> | undefined

height?

ResponsiveValue<Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "full"> | undefined

minHeight?

ResponsiveValue<Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "full"> | undefined

maxHeight?

ResponsiveValue<Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "full"> | undefined

top?0 | (string & {}) | undefined

left?0 | (string & {}) | undefined

right?0 | (string & {}) | undefined

bottom?0 | (string & {}) | undefined

padding?

ResponsiveValue<0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})> | undefined

paddingX?

ResponsiveValue<0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})> | undefined

paddingY?

ResponsiveValue<0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})> | undefined

paddingTop?

ResponsiveValue<0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "safeArea"> | undefined

paddingRight?

ResponsiveValue<0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})> | undefined

paddingBottom?

ResponsiveValue<0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | "safeArea"> | undefined

paddingLeft?

ResponsiveValue<0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})> | undefined

position?"fixed" | "relative" | "absolute" | "sticky" | undefined

overflowX?"hidden" | "auto" | "visible" | "scroll" | undefined

overflowY?"hidden" | "auto" | "visible" | "scroll" | undefined

zIndex?number | (string & {}) | undefined

flexDirection?ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse"> | undefined

alignItems?"flex-start" | "flex-end" | "center" | "stretch" | undefined

alignContent?"flex-start" | "flex-end" | "center" | "stretch" | undefined

alignSelf?"flex-start" | "flex-end" | "center" | "stretch" | undefined

gap?

ResponsiveValue<0 | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})> | undefined

gridColumn?string | undefined

gridRow?string | undefined

unstable_transform?string | undefined

_active?

{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined

as?React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined

asChild?boolean | undefined

hideFrom?BreakpointThreshold | undefined

Responsive Design

Flex의 레이아웃 프로퍼티에 반응형 값을 전달하여 viewport 크기에 따라 스타일을 조정할 수 있습니다.

Flex

Props

Responsive Design

Responsive Design

On this page