こんにちは、花王株式会社の @TsuchiyaK です。
MUIのレイアウト系コンポーネントとしてBoxがありますが、最近Stackを積極的に使うようにしてから、その便利さと可読性の向上を強く実感しました。この記事では、縦並び／横並びの基本的なUIを例に、BoxとStackの実装を比較しながら、使い分けの考え方を紹介します。
結論
- 「要素を並べる」だけなら
Stackがシンプルで読みやすい -
Stackは「縦／横方向に要素を並べる」用途に特化しており、spacingやdirectionで意図が明確 -
Boxは万能だが、レイアウト目的で毎回displayやflexDirectionを書くよりもStackで簡潔に書ける
縦に要素を並べる（縦方向のStack）
UIイメージ（縦並び、中央寄せ、等間隔）
Boxでの実装例：
import Box from '@mui/material/Box';
export default function Home() {
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
height: '100vh',
gap: 2,
}}
>
<Box>要素1</Box>
<Box>要素2</Box>
<Box>要素3</Box>
</Box>
);
}
Stackでの実装例：
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
export default function Home() {
return (
<Stack
spacing={2}
sx={{
alignItems: 'center',
height: '100vh',
}}
>
<Box>要素1</Box>
<Box>要素2</Box>
<Box>要素3</Box>
</Stack>
);
}
Stackなら、縦並びがデフォルトなのでdisplayとflexDirectionの指定が不要になり、意図（並べる・間隔をあける）がより明確になります。
横に要素を並べる（横方向のStack）
UIイメージ（横並び、中央寄せ、等間隔）
Boxでの実装例：
import Box from '@mui/material/Box';
export default function Home() {
return (
<Box
sx={{
display: 'flex',
width: '100vw',
justifyContent: 'center',
gap: 2,
}}
>
<Box>要素1</Box>
<Box>要素2</Box>
<Box>要素3</Box>
</Box>
);
}
Stackでの実装例：
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
export default function Home() {
return (
<Stack
spacing={2}
direction="row"
sx={{
width: '100vw',
justifyContent: 'center',
}}
>
<Box>要素1</Box>
<Box>要素2</Box>
<Box>要素3</Box>
</Stack>
);
}
direction="row"で横並びを明示できます。spacingのまま横方向の間隔も管理できるため、読み手にとってレイアウト意図が伝わりやすいです。
所感（使い分けの指針）
- 要素を一方向（縦／横）に素直に並べるだけなら、まず
Stackを検討 - レイアウト以外の目的で
Boxに多数のsxや他の責務が集まるなら、Stackと分離して責務を明確化 - もちろん
Boxが適切な場面（複雑なsx、任意タグ、低レベル制御など）もあるので、両者を使い分ける
おまけ：Gridで素早く整列
縦横方向に要素を並べる場合はGridも有用です。均一な格子状配置だけでなく、柔軟なレイアウトが簡潔に書けます。
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
const commonBoxStyle = {
border: '1px solid black',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
m: 2,
};
export default function Home() {
return (
<Grid
container
spacing={2}
sx={{
width: '100vw',
justifyContent: 'center',
}}
>
<Grid xs={8}>
<Box sx={commonBoxStyle}>要素1</Box>
</Grid>
<Grid xs={4}>
<Box sx={commonBoxStyle}>要素2</Box>
</Grid>
<Grid xs={4}>
<Box sx={commonBoxStyle}>要素3</Box>
</Grid>
<Grid xs={8}>
<Box sx={commonBoxStyle}>要素4</Box>
</Grid>
</Grid>
);
}
まとめ
-
Stackは「並べる」意図がコードから伝わりやすく、spacingで間隔管理も容易 -
Boxは強力だが、レイアウトで毎回flex指定を重ねるよりStackで簡潔に -
Gridは縦横の複合レイアウトに便利。用途に応じて使い分けるのがおすすめ