Flex와 Grid

Flex와 Grid (Flex and Grid)

flex와 grid 레이아웃을 제어하는 JSX 스타일 prop을 알려드려요. 레이아웃을 세밀하게 다루는 데 필요한 속성을 정리했어요.

출처: 문서

본문

Flex Basis

flexBasis prop을 사용해서 flex 아이템의 초기 메인 크기를 설정하세요.

<Flex>
  <Box flexBasis="25%" />
  <Box flexBasis="25%" />
  <Box flexBasis="50%" />
</Flex>

Prop	CSS Property	Token Category
flexBasis	flex-basis	-

Flex Direction

flexDir 또는 flexDirection prop을 사용해서 flex 컨테이너의 메인 축 방향을 설정하세요.

<Box display="flex" flexDirection="column">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Flex 컴포넌트를 사용할 때는 direction prop이 flexDirection의 별칭이에요.

<Flex direction="column">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Prop	CSS Property	Token Category
flexDir, flexDirection	flex-direction	-

Flex Wrap

flexWrap prop을 사용해서 flex 아이템이 한 줄에 강제로 배치되는지, 여러 줄로 감쌀 수 있는지 설정하세요.

<Box display="flex" flexWrap="wrap">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Flex 컴포넌트를 사용할 때는 wrap prop이 flexWrap의 별칭이에요.

<Flex wrap="wrap">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Prop	CSS Property	Token Category
flexWrap	flex-wrap	-

Flex

flex prop을 사용해서 flex 컨테이너나 아이템의 유연성을 정의하세요.

<Flex>
  <Box flex="1" />
  <Box />
</Flex>

Prop	CSS Property	Token Category
flex	flex	-

Flex Grow

flexGrow prop을 사용해서 flex 아이템의 grow 비율을 설정하세요.

<Flex>
  <Box flexGrow="0" />
  <Box flexGrow="1" />
</Flex>

Prop	CSS Property	Token Category
flexGrow	flex-grow	-

Flex Shrink

flexShrink prop을 사용해서 flex 아이템의 shrink 비율을 설정하세요.

<Flex>
  <Box flexShrink="0" />
  <Box flexShrink="1" />
</Flex>

Prop	CSS Property	Token Category
flexShrink	flex-shrink	-

Order

order prop을 사용해서 flex 아이템의 순서를 설정하세요.

<Flex>
  <Box order="0" />
  <Box order="1" />
</Flex>

Prop	CSS Property	Token Category
order	order	-

Gap

gap prop을 사용해서 flex 또는 grid 컨테이너의 아이템 사이 간격을 설정하세요.

<Flex gap="4">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Prop	CSS Property	Token Category
gap	gap	spacing

Grid Template Columns

gridTemplateColumns prop을 사용해서 grid 컨테이너의 열을 정의하세요.

<Box display="grid" gridTemplateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Grid 컴포넌트를 사용할 때는 templateColumns prop이 gridTemplateColumns의 별칭이에요.

<Grid templateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Grid>

Grid Template Start/End

gridTemplateStart와 gridTemplateEnd prop을 사용해서 grid 컨테이너의 시작과 끝을 정의하세요.

<Box display="grid" gridTemplateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box gridColumn="span 2 / span 2">Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
gridTemplateStart	grid-template-start	-
gridTemplateEnd	grid-template-end	-

Grid Template Rows

gridTemplateRows prop을 사용해서 grid 컨테이너의 행을 정의하세요.

<Box display="grid" gap="4" gridTemplateRows="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
gridTemplateRows	grid-template-rows	-

Grid Row Start/End

gridRowStart와 gridRowEnd prop을 사용해서 grid 아이템의 시작과 끝을 정의하세요.

<Box display="grid" gap="4" gridTemplateRows="repeat(3, minmax(0, 1fr))">
  <Box gridRowStart="1" gridRowEnd="3">
    Item 1
  </Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
gridRowStart	grid-row-start	-
gridRowEnd	grid-row-end	-

Grid Autoflow

gridAutoFlow prop을 사용해서 자동 배치된 아이템이 grid에 어떻게 흐르는지 정의하세요.

<Box display="grid" gridAutoFlow="row">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
gridAutoFlow	grid-auto-flow	-

Grid Auto Columns

gridAutoColumns prop을 사용해서 명시적 크기 없이 생성된 grid 열의 크기를 지정하세요.

<Box display="grid" gridAutoColumns="120px">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
gridAutoColumns	grid-auto-columns	-

Grid Auto Rows

gridAutoRows prop을 사용해서 명시적 크기 없이 생성된 grid 행의 크기를 지정하세요.

<Box display="grid" gridTemplateRows="200px" gridAutoRows="120px">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
gridAutoRows	grid-auto-rows	-

Justify Content

justifyContent prop을 사용해서 flex 컨테이너의 메인 축을 따라 아이템을 정렬하세요.

<Box display="flex" justifyContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Flex 컴포넌트를 사용할 때는 justify prop이 justifyContent의 별칭이에요.

<Flex justify="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Prop	CSS Property	Token Category
justifyContent	justify-content	-

Justify Items

justifyItems prop을 사용해서 grid 아이템이 자신의 범위 내에서 어떻게 정렬될지 제어하세요.

<Box display="grid" justifyItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
justifyItems	justify-items	-

Align Content

alignContent prop을 사용해서 여분 공간이 있을 때 flex 컨테이너의 교차 축을 따라 콘텐츠 행을 정렬하세요.

<Box display="flex" alignContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Flex 컴포넌트를 사용할 때는 align prop이 alignContent의 별칭이에요.

<Flex align="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Prop	CSS Property	Token Category
alignContent	align-content	-

Align Items

alignItems prop을 사용해서 grid 아이템이 자신의 범위 내에서 어떻게 정렬될지 제어하세요.

<Box display="grid" alignItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Align Self

alignSelf prop을 사용해서 grid 아이템이 자신의 범위 내에서 어떻게 정렬될지 제어하세요.

<Box display="grid">
  <Box alignSelf="center">Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
alignSelf	align-self	-

Place Content

placeContent prop을 사용해서 블록과 인라인 방향으로 콘텐츠를 동시에 정렬하세요. justifyContent와 alignContent를 합친 것처럼 동작하며 flex와 grid 컨테이너에서 사용할 수 있어요.

<Flex placeContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

Prop	CSS Property	Token Category
placeContent	place-content	-

Place Items

placeItems prop을 사용해서 블록과 인라인 방향으로 아이템을 동시에 정렬하세요. justifyItems와 alignItems를 합친 것처럼 동작하며 flex와 grid 컨테이너에서 사용할 수 있어요.

<Box display="grid" placeItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
placeItems	place-items	-

Place Self

placeSelf prop을 사용해서 grid 아이템을 블록과 인라인 방향으로 동시에 정렬하세요.

<Box display="grid">
  <Box placeSelf="center">Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Prop	CSS Property	Token Category
placeSelf	place-self	-

더 알아보기 (Learn more)

• Style Props - Layout
• Style Props - Sizing