DEV Community

kaede
kaede

Posted on

Mui Flex で色付き Box を流す。

#mui #flex

準備 

 import Box from '@mui/material/Box';
Enter fullscreen mode Exit fullscreen mode

React MUI で Box を用意。

400 x 400 の グレーの Box のなかに
150 x 150 の 黒と水色の Box を入れる構成。

flex で 横 ( row ) に並べる

グレーのボックスに 

 display: flex, flexDirection: 'row'
Enter fullscreen mode Exit fullscreen mode

これを指定する。

Image description

すると、中身が横に並ぶ。

 <Box sx={{ width : 400, height: 400, background: 'gray', display: 'flex', flexDirection: 'row' }}> <Box sx={{ width : 150, height: 150, background: 'black', }}> </Box>  <Box sx={{ width : 150, height: 150, background: 'cyan', }}> </Box>  </Box>
Enter fullscreen mode Exit fullscreen mode

flex を付けた時点で flex direction はデフォルトが row

Flex で 縦 ( column ) に並べる

縦
に
並
べ
る

反対にグレーの Box に

 flexDirection: 'column'
Enter fullscreen mode Exit fullscreen mode

これを指定すると

Image description

縦並びになる。

HTML ではデフォルトが縦で、 flex 使う時点で横に並べたいので使い道はなさそう。

応用して Header, Sidebar, main を作る

Image description

 <> <Box sx={{ width : 1200, height: 150, background: 'salmon', }}> header </Box>  <Box sx={{ width : 1200, height: 800, color: 'white', background: 'gray', display: 'flex', flexDirection: 'row' }}> <Box sx={{ width : 250, height: 700, background: 'black', }}> sidebar </Box>  <Box sx={{ width : 750, height: 600, color: 'black', background: 'cyan', }}> main </Box>  </Box>  </>
Enter fullscreen mode Exit fullscreen mode

flex 指定をしていない Header の下に コンテナを流し

コンテナの中に sidebar と main を flex で右に流す。

これでだいぶ web サイトっぽいレイアウトができる。手軽。

まとめ

MUI で flex をつけると、そのコンポーネントの子供達が横に並ぶ。

column に指定すると縦に並ぶ。

flex を付けたコンポーネント自体をいくら並べても横には並ばない。

Top comments (0)