【React + MUI】フレックスボックスを使ったコンポーネント間の間隔設定とレスポンシブ対応

2025年1月9日

URLをコピーしました！

Webアプリケーション開発において、UIコンポーネントの配置を整えることは非常に重要です。
特に、複数のコンポーネントを横並びまたは縦並びに配置しつつ、コンポーネント間に適切な間隔を設定することは、ユーザー体験の向上につながります。
この記事では、MUI（Material-UI）を使ったフレックスボックスレイアウトの設定方法を解説します。

この記事の対象読者

MUIを使用してReactアプリケーションを開発している方
レスポンシブデザインに興味があるフロントエンドエンジニア
UIコンポーネントの配置を簡単に整えたいシステムエンジニア

フレックスボックスを使用したレイアウトの基本

MUIでは、<Box>コンポーネントを使用してフレックスボックスレイアウトを簡単に構築できます。BoxはCSSプロパティを直接設定できるため、柔軟なレイアウトを実現できます。

以下は、基本的な設定例です：

</Box>

主なプロパティ

display: フレックスボックスを有効にするためにflexを指定します。
gap: 子要素間の間隔を設定します。
flexDirection: 要素の配置方向を指定します（rowまたはcolumn）。

横並び・縦並びの切り替えをレスポンシブに対応する方法

レスポンシブデザインを簡単に実現するには、MUIのブレークポイント機能を活用します。例えば、画面サイズに応じて横並びと縦並びを切り替えるには、flexDirectionをレスポンシブ対応で設定します。

</Box>

ブレークポイントの指定

xs: 最小画面サイズ（例: スマートフォン）
sm: 小画面（例: タブレット）
md, lg, xl: 中画面、大画面、特大画面（例: デスクトップ）

実装例

以下は、都道府県セレクトボックスと市区町村セレクトボックスを横並びまたは縦並びに配置し、間隔を設定する例です。

import React from 'react';

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

import PrefSelect from './PrefSelect';

import CitySelect from './CitySelect';

function MyComponent({ localGoverment, setLocalGoverment }) {

return (

<Box

display="flex"

flexDirection={{ xs: 'column', sm: 'row' }}

gap={2} // コンポーネント間のスペースを設定

<PrefSelect

localGoverment={localGoverment}

setLocalGoverment={setLocalGoverment}

label="都道府県 *"

flexFlow="column"

<CitySelect

prefCode={localGoverment?.pref_code}

localGoverment={localGoverment}

setLocalGoverment={setLocalGoverment}

label="市区町村 *"

</Box>

);

}

export default MyComponent;

まとめ

フレックスボックスとMUIのBoxコンポーネントを使えば、コンポーネント間の間隔設定やレスポンシブなレイアウトを簡単に実現できます。本記事で紹介した方法を活用して、開発効率を向上させましょう。

よくある質問（FAQ）

コンポーネント間の間隔をgap以外で設定する方法はありますか？: はい、各子コンポーネントに直接marginを設定することも可能です。
ただし、gapを使用するほうがシンプルで読みやすいコードになります。
Box以外でフレックスボックスを設定できますか？: はい、sxプロパティを使用して他のMUIコンポーネントにもスタイルを適用できます。
ただし、Boxは専用コンポーネントであるためおすすめです。