準備
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 を付けたコンポーネント自体をいくら並べても横には並ばない。
Top comments (0)