플렉스

플렉스 (Flex)

플렉스(flex) 레이아웃을 만들기 위한 컴포넌트예요. div 요소 기반으로 만들어졌어요.

출처: 문서

본문

플렉스 레이아웃을 만드는 컴포넌트예요.

<Flex gap="3">
  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>

  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>

  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>

  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>

  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>
</Flex>

API Reference

이 컴포넌트는 div 요소를 기반으로 하며 공통 margin props를 지원해요.

플렉스 레이아웃을 만들려면 이 props를 사용해요.

Prop Type Default
as "div" | "span" "div"
asChild boolean No default value
display Responsive<"none" | "inline-flex" | "flex"> No default value
direction Responsive<enum> No default value
align Responsive<enum> No default value
justify Responsive<"start" | "center" | "end" | "between"> No default value
wrap Responsive<"nowrap" | "wrap" | "wrap-reverse"> No default value
gap Responsive<enum | string> No default value
gapX Responsive<enum | string> No default value
gapY Responsive<enum | string> No default value

다음 props는 Box, Flex, Grid, Container, Section 컴포넌트 간에 공유돼요. 레이아웃 컴포넌트에 대한 자세한 내용은 Layout에서 확인할 수 있어요.

Prop Type Default
p Responsive<enum | string> No default value
px Responsive<enum | string> No default value
py Responsive<enum | string> No default value
pt Responsive<enum | string> No default value
pr Responsive<enum | string> No default value
pb Responsive<enum | string> No default value
pl Responsive<enum | string> No default value
width Responsive<string> No default value
minWidth Responsive<string> No default value
maxWidth Responsive<string> No default value
height Responsive<string> No default value
minHeight Responsive<string> No default value
maxHeight Responsive<string> No default value
position Responsive<enum> No default value
inset Responsive<enum | string> No default value
top Responsive<enum | string> No default value
right Responsive<enum | string> No default value
bottom Responsive<enum | string> No default value
left Responsive<enum | string> No default value
overflow Responsive<enum> No default value
overflowX Responsive<enum> No default value
overflowY Responsive<enum> No default value
flexBasis Responsive<string> No default value
flexShrink Responsive<enum | string> No default value
flexGrow Responsive<enum | string> No default value
gridArea Responsive<string> No default value
gridColumn Responsive<string> No default value
gridColumnStart Responsive<string> No default value
gridColumnEnd Responsive<string> No default value
gridRow Responsive<string> No default value
gridRowStart Responsive<string> No default value
gridRowEnd Responsive<string> No default value
alignSelf Responsive<enum> No default value
justifySelf Responsive<enum> No default value

더 알아보기 (Learn more)