KDDI Engineer&Designer Advent Calendar 2021の25日目の記事です。最終日なのに小粒なネタを投稿します。
今までMaterialUI(MUI)を使っていたのですが最近ReactでChakraUIを始めてみました。
レイアウトを組む方法が様々な方法があるため、「縦方向＆横方向で真ん中寄せ」をいろんな方法で書いてみました。
何故真ん中に寄るのか説明しながらそれぞれのコンポーネントの特徴を説明していきたいと思います。
真ん中寄せ生活の参考にしてもらえると幸いです。
真ん中に置くコンポーネント
以下のコンポーネントを真ん中に置く想定で説明していきます。
const RectBox :React.FC = () => (
<Box bg='gray.500' boxSize={100} />
)
以下の例1~6すべてにおいて、以下が表示されます。
例１.Boxで
<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.Centerで真ん中寄せ
<Box h={200} bg='gray.100'>
<Center h='100%'>
<RectBox />
</Center>
</Box>
この例では、<Center>を使って真ん中寄せができます。alignもjustifyも指定不要です。ただし、h='100%'をつけないと高さがないため上に張り付いてしまいます。高さを明示的に書く必要があります。
参考：
3.Flexで真ん中寄せ
<Flex h={200} justify='center' align='center' bg='gray.100' >
<RectBox />
</Flex>
Flexを使っていますが、例１とやっていることは近いかもしれません。
justifyでjustifyContentと同じ、alignでalignItemsと同じ意味になります。
Boxではjustifyとalignは省略の意味で使えないので要注意です。
参考：
4.Flex & Spacerで長さ調整
<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は交差軸方向
- heightを書かないと高さ方向は寄せてくれない