【CSS Modules】justify-contentプロパティの使い方
justify-contentプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
justify-contentプロパティは、FlexboxまたはCSS Gridレイアウトにおいて、コンテナ内のアイテムの主軸方向の配置を制御する値を保持するプロパティです。このプロパティは、コンテナの主軸の方向（Flexboxではflex-directionプロパティで定義され、通常は横方向）に沿って、複数のアイテムをどのように整列させ、残りの空きスペースをどのように分配するかを指定するために使用されます。
利用できる主な値には、flex-start、flex-end、center、space-between、space-around、space-evenlyなどがあります。flex-startは、アイテムを主軸の開始位置に寄せて配置し、これが初期値です。flex-endは、アイテムを主軸の終了位置に寄せて配置します。centerは、アイテムを主軸の中心に配置し、その両側に均等な余白を生成します。
space-betweenは、最初と最後のアイテムをコンテナの端に配置し、その間にある残りのアイテム間に均等なスペースを分配します。space-aroundは、各アイテムの左右に均等なスペースを分配し、これにより両端のアイテムは内側のアイテムの半分のスペースを持ちます。最も新しいspace-evenlyは、すべてのアイテム間および両端に完全に均等なスペースを分配します。
このプロパティは、WebページのUI要素（例えばナビゲーションメニューの項目やカードの並び、フォームのボタンなど）を視覚的に美しく整列させるために不可欠です。レスポンシブデザインの構築においても重要な役割を果たし、異なる画面サイズでのレイアウト調整に柔軟性をもたらします。FlexコンテナやGridコンテナのアイテムが複数行にわたる場合でも、justify-contentは主軸方向の単一行または単一トラックの整列に適用されます。
構文(syntax)
1.container { 2 justify-content: center; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません