Flex

Flex (플렉스)

플렉스 레이아웃을 관리할 때 사용하는 컴포넌트예요. 요소들을 가로나 세로로 배치하고 정렬하는 데 유용해요.

출처: 문서

import { Flex, Spacer } from "@chakra-ui/react"

<Flex>
  <div />
  <div />
</Flex>

direction 또는 flexDirection prop을 사용해서 flex의 방향을 바꿀 수 있어요.

| 예제 (flex-with-direction) |

align 또는 alignItems prop을 사용해서 자식 요소를 교차 축(cross axis)으로 정렬할 수 있어요.

| 예제 (flex-with-align) |

justify 또는 justifyContent prop을 사용해서 자식 요소를 주 축(main axis)으로 정렬할 수 있어요.

| 예제 (flex-with-justify) |

order prop을 사용해서 자식 요소의 순서를 바꿀 수 있어요.

| 예제 (flex-with-order) |

flex 항목에 마진을 적용해서 형제 요소로부터 밀어낼 수 있어요.

| 예제 (flex-with-auto-margin) |

Spacer 컴포넌트를 사용해서 flex 항목 사이에 유연한 공간을 만들 수 있어요. 이 컴포넌트는 사용 가능한 모든 공간을 채우도록 확장되어 항목들을 양쪽 끝으로 밀어내요.

| 예제 (flex-with-spacer) |

wrap 또는 flexWrap prop을 사용해서 자식 요소가 부모를 넘칠 때 줄바꿈을 할 수 있어요.

| 예제 (flex-with-wrap) |

| PropTable (Flex / Flex) |