https://chakra-ui.com/docs/components/flex
`Box`で`display="flex"`としてもよいが、`Flex`を使う方がシンプル。
```html
<Flex h={'200px'} bg="gray" gap="15px" justify="center" align="center">
<Box w={50} h={25} bg={'red'}>
<Center>one</Center>
</Box>
<Box w={50} h={25} bg={'red'}>
<Center>two</Center>
</Box>
<Box w={50} h={25} bg={'red'}>
<Center>three</Center>
</Box>
</Flex>
```
<button class="playground"><a href="https://play.chakra-ui.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwATFwCEIAPAGlwDEAbGc3AYRgDtsZNcBfXAM0whS4A5AAEwACwCGAa0ySAtAFckAekwxJYbEIA6zPXQw5ckZgGc8AQTRpcAXlwAKAJT2AfPj25c67IszMTl7euAA8NHS44nbAQgBMAAwJaCRC3ABGAOZ2OiCZcgCeubiZkmg5IACMAKwpxQBWihZIPAUVYCxsmMWS1EiZzO2d7LluwSFhxCS4AO4x1Qnc0cBx1RnZsepQaWOBEyGhTKzsbhDMMKEqR127+2EqU7f7oVOz84tRMavrMUJbO+NntcTtgZhBLsDME8JpdHoDvC9SG9gAsll81rgsr9-pxoUDhlDsOJ1BcrgS8QiHqQ8ZcIiQns49Jw9CBOEA">Playground</a></button>