メインコンテンツまでスキップ

Chakra UIとFlexbox

Chakra UIは、ReactアプリケーションでFlexboxレイアウトを簡単に実装できる強力なコンポーネントライブラリです。 このページでは、Chakra UIの主要なFlexboxベースコンポーネント（Stack、Flex、Center、Spacer）がどのようなCSS Flexboxプロパティで実装されているかを詳しく解説します。

Flexコンポーネント​

Chakra UIの Flex コンポーネントは、display: flex が設定されたBoxコンポーネントの特殊版です。

基本的な実装​

Chakra UI
import { Flex } from "@chakra-ui/react"

<Flex>
  <Box>アイテム 1</Box>
  <Box>アイテム 2</Box>
  <Box>アイテム 3</Box>
</Flex>

これは以下のCSSと同等です。

CSS
.flex-container {
  display: flex;
}
アイテム 1
アイテム 2
アイテム 3

方向の制御​

Chakra UI
<Flex direction="column">
  <Box>アイテム 1</Box>
  <Box>アイテム 2</Box>
  <Box>アイテム 3</Box>
</Flex>
CSS 相当
.flex-container {
  display: flex;
  flex-direction: column;
}
アイテム 1
アイテム 2
アイテム 3

Stackコンポーネント​

Stack コンポーネントは、一方向に要素を並べるためのFlexboxベースのコンポーネントです。垂直方向（VStack）と水平方向（HStack）の両方をサポートします。

Stack（基本）​

Chakra UI
import { Stack } from "@chakra-ui/react"

<Stack>
  <Box>アイテム 1</Box>
  <Box>アイテム 2</Box>
  <Box>アイテム 3</Box>
</Stack>
CSS 相当
.stack-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
アイテム 1
アイテム 2
アイテム 3

VStack（垂直スタック）​

VStack は垂直方向に要素を並べる専用コンポーネントです。

Chakra UI
import { VStack } from "@chakra-ui/react"

<VStack>
  <Box>アイテム 1</Box>
  <Box>アイテム 2</Box>
  <Box>アイテム 3</Box>
</VStack>
CSS 相当
.vstack-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
アイテム 1
アイテム 2
アイテム 3

HStack（水平スタック）​

HStack は水平方向に要素を並べる専用コンポーネントです。

Chakra UI
import { HStack } from "@chakra-ui/react"

<HStack>
  <Box>アイテム 1</Box>
  <Box>アイテム 2</Box>
  <Box>アイテム 3</Box>
</HStack>
CSS 相当
.hstack-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
アイテム 1
アイテム 2
アイテム 3

Spacerコンポーネント​

Spacer コンポーネントは、Flexコンテナ内で利用可能なスペースを埋めるために使用します。 CSS の flex-grow: 1 と同等の機能を提供します。

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

<Flex>
  <Box>左端のコンテンツ</Box>
  <Spacer />
  <Box>右端のコンテンツ</Box>
</Flex>
CSS 相当
.flex-with-spacer {
  display: flex;
}

.spacer {
  flex: 1,
  justifySelf: "stretch",
  alignSelf: "stretch",
}
左端のコンテンツ
右端のコンテンツ

複数のSpacerの使用​

Chakra UI
<Flex>
  <Box>左</Box>
  <Spacer />
  <Box>中央</Box>
  <Spacer />
  <Box>右</Box>
</Flex>
CSS 相当
.flex-multiple-spacers {
  display: flex;
}

.spacer {
  flex-grow: 1;
}
左
中央
右

Centerコンポーネント​

Center コンポーネントは、子要素を中央に配置するためのFlexboxベースのコンポーネントです。

Chakra UI
import { Center } from "@chakra-ui/react"

<Center>
  <Box>中央に配置されたコンテンツ</Box>
</Center>
CSS 相当
.center-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Wrapコンポーネント​

Wrap コンポーネントは、要素間にスペースを追加し、利用可能なスペースが不足した場合に自動的に折り返すFlexboxベースのコンポーネントです。

基本的な使用方法​

Chakra UI
import { Wrap, WrapItem } from "@chakra-ui/react"

<Wrap>
  <WrapItem>
    <Box>アイテム 1</Box>
  </WrapItem>
  <WrapItem>
    <Box>アイテム 2</Box>
  </WrapItem>
  <WrapItem>
    <Box>アイテム 3</Box>
  </WrapItem>
  <WrapItem>
    <Box>アイテム 4</Box>
  </WrapItem>
  <WrapItem>
    <Box>アイテム 5</Box>
  </WrapItem>
</Wrap>
CSS 相当
.wrap-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
アイテム 1
アイテム 2
アイテム 3
アイテム 4
アイテム 5