ChakraUI의 다양한 방법으로 가운데로 접근

KDDI Engineer&Designer Advent Calendar 2021 25일째 보도다.마지막 날이지만 작은 단락을 발표할 것이다.
지금까지는 머티리얼 UI(MUI)를 사용했지만, 최근에는 리액트에서 차크라 UI를 시도해 봤다.
디자인 방법에는 여러 가지 방법이 있기 때문에 여러 가지 방법으로'세로 & 가로 중간 정렬'을 써 봤습니다.
나는 왜 한가운데에 가까워졌는지 설명하면서 각자의 구성 요소의 특징을 설명하고 싶다.
거중생활의 참고로 삼았으면 좋겠어요.
중간 구성 요소
아래의 구성 요소는 중간에 놓인 구상으로 설명한다.

const RectBox :React.FC = () => (
  <Box bg='gray.500' boxSize={100} />
)

다음 예제 1~6에는 다음과 같은 내용이 표시됩니다.

예1.박스

<Box h={200} display='flex' justifyContent='center' alignItems='center' bg='gray.100'>
   <RectBox />
</Box>

Box에서 h를 지정하여 높이를 지정합니다.
ChakraUI처럼 쓰여지지 않았어요.MaterialUI를 사용할 때는 이렇게 적혀 있습니다.display='flex' 상태justifyContent='center'에서는 세로로 가운데alignItems='center'로 접근하면 가로로 가운데로 접근한다.
참조:
예2.센터 중앙에서 접근

<Box h={200} bg='gray.100'>
   <Center h='100%'>
     <RectBox />
   </Center>
</Box>

이 예에서 <Center> 를 사용하여 중간에 접근할 수 있다.align과justify는 지정할 필요가 없습니다.하지만 h='100%'를 넣지 않으면 높이가 나지 않아 붙는다.높이를 명확하게 써야 한다.
참조:
3. 플렉스 중간에 놓기

<Flex h={200} justify='center' align='center' bg='gray.100' >
  <RectBox />
</Flex>

Flex를 사용하지만, 예1이 한 일과 가깝지 않다.justify에서는 justifyContent와 같고, align에서는 alignItems와 뜻이 같다.
Box에서 justify 와 align 는 생략할 수 없다는 뜻을 주의하십시오.
참조:
4. Flex&Space를 사용하여 길이 조정

<Flex h={200} align='center' bg='gray.100' >
   <Spacer />
   <RectBox />
   <Spacer />
</Flex>

Spacer를 삽입하여 양쪽 끝을 조정합니다.세로align='center' 조정
참조:
5.HStack

<HStack h={200} justify='center' bg='gray.100'>
   　<RectBox />
</HStack>

Hstack을 사용하면 수평 방향(Horizontal), 즉 가로로 스택할 수 있습니다.
송이경(신지현): 내가 일부러 Hstack을 가져왔는데 이번처럼 하나만 넣으면 되잖아.
6.VStack

<VStack h={200} justify='center' bg='gray.100'>
    <RectBox />
</VStack>

VStack을 사용하면 수직(Vertical) 방향으로 세로로 스택할 수 있습니다.Flex를 사용할 때는 수평 방향align='center', 세로 방향은 중앙, VStack은 수직 방향justify='center'으로 스택하기 위해 설정해야 합니다.
송이경(신지현): 내가 일부러 Hstack을 가져왔는데 이번처럼 하나만 넣으면 되잖아.
참조:
어?가운데 안 닿아요?이렇게 생각하다

justify와align이 상반되는지 확인justify는 주축 방향이고 align은 교차축 방향

하이라이트를 쓰지 않으면 높이 방향이 가까워지지 않는다