Spacerコンポーネント
Flexの一部として、<Spacer />というコンポーネントが存在します。
レイアウトにおいて覚えておくと便利なコンポーネントです
例えば下記のようにした場合、space-betweenと同様の効果が得られます。
<Flex>
<Box bg={"red.100"}>Hello</Box>
<Spacer />
<Box bg={"red.100"}>Hello</Box>
<Spacer />
<Box bg={"red.100"}>Hello</Box>
</Flex>
ただこれでは単に記述量が増えてるだけであまりうれしくありません。
ここからはもう少し<Spacer>の有用性なケースを見ていきます
Spacerの役立つ使い方
例えば下記のように左右寄せを不均衡に行う場合を考えてみましょう
| 例 |
|---|
純粋にFlexコンポーネントのみでやるなら下記のようになるでしょう
<Flex justifyContent="space-between">
<Flex>
<Box color="gray.500" px={1}>@taro:</Box>
<Box fontWeight="bold">Hello!</Box>
</Flex>
<Flex>
<Box color="gray.500">2021-05-01 12:00</Box>
</Flex>
</Flex>
Spacerを使うと下記のようになります。
<Flex>
<Box color="gray.500" px={1}>@taro:</Box>
<Box fontWeight="bold">Hello!</Box>
<Spacer/>
<Box color="gray.500">2021-05-01 12:00</Box>
</Flex>
本来のDOMの使い方からすると少々気持ち悪さもあるので好みが分かれる部分はありますが、不要なDOMが削除される点やDOMからレイアウトを想像しやすい部分には利点があるでしょう。
Stack, HStackと組み合わせる
SpacerはFlexのドキュメントに記載はされていたりしますが、中身の実態はstretchをしたdivコンポーネントなので、同じようにFlexベースであるStackでも理屈上利用可能です。[^1]
例えば先の例であれば下記のようにより完結に記述出来るでしょう
<HStack spacing={1}>
<Box color="gray.500">@taro:</Box>
<Box fontWeight="bold">Hello!</Box>
<Spacer/>
<Box color="gray.500">2021-05-01 12:00</Box>
</HStack>