Mui Flex で色付き Box を流す。

準備

import Box from '@mui/material/Box';

React MUI で Box を用意。

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

---

flex で 横 ( row ) に並べる

グレーのボックスに

display: flex,
flexDirection: 'row'

これを指定する。

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

      <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>

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

---

Flex で 縦 ( column ) に並べる

縦
に
並
べ
る

反対にグレーの Box に

flexDirection: 'column'

これを指定すると

縦並びになる。

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

---

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

    <>
      <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>
    </>

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

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

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

まとめ

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

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

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