7.1 プロパティjustify-content
Flexboxは、Flexコンテナ内の要素の整列やスペースを管理するための素晴らしいツールを提供しているよ。このための重要なプロパティの一つがjustify-content
で、これがFlex要素をメイン軸に沿って整列させるんだ。
プロパティjustify-contentは、Flexコンテナのメイン軸に沿ってFlex要素がどのように分布されるかを決定するよ。
メイン軸はプロパティflex-direction:の値によって変わるんだ。
flex-directionがrowまたはrow-reverseの場合、メイン軸は水平だよflex-directionがcolumnまたはcolumn-reverseの場合、メイン軸は垂直だよ
値:
flex-start: 要素はコンテナの始まりに整列する（デフォルトの値）flex-end: 要素はコンテナの端に整列するcenter: 要素はコンテナの中央に整列するspace-between: 要素は等間隔で配置され、各要素間には等しいスペースがあるspace-around: 要素は均等に配置され、端と間にスペースがあるspace-evenly: 要素は均等に配置され、間とコンテナの端に等しいスペースがある
使用例:
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-start {
justify-content: flex-start;
}
<div class="container flex-start">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
7.2 justify-contentの値
1. flex-start
flex-startの値では、要素はFlexコンテナの始まりに整列するよ、つまりメイン軸が水平（row）の場合は左側に、
垂直（column）の場合は上側に整列する。
使用例:
.container {
display: flex;
justify-content: flex-start;
}
<div class="container">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
2. flex-end
flex-endの値では、要素はFlexコンテナの終わりに整列するよ、つまりメイン軸が水平（row）の場合は右側に、
垂直（column）の場合は下側に整列する。
使用例:
.container {
display: flex;
justify-content: flex-end;
}
<div class="container">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
3. center
centerの値では、要素はFlexコンテナの中心に整列するんだ。この値はセンタリングのレイアウトを作るのに便利だよ。
使用例:
.container {
display: flex;
justify-content: center;
}
<div class="container">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
4. space-between
space-betweenの値では、要素がメイン軸に沿って等間隔で配置され、各要素間には等しいスペースがあるよ。
最初の要素はコンテナの始まりに、最後の要素はコンテナの終わりに整列するんだ。
使用例:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
5. space-around
space-aroundの値では、要素が均等に配置され、端と間にスペースがあるよ。
要素間のスペースはコンテナの端のスペースの2倍になるんだ。
使用例:
.container {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
6. space-evenly
space-evenlyの値では、要素が均等に配置され、間とコンテナの端に等しいスペースがあるよ。
この値はコンテナ全体に均等なスペースを提供するんだ。
使用例:
.container {
display: flex;
justify-content: space-evenly;
}
<div class="container">
<div class="item">エレメント 1</div>
<div class="item">エレメント 2</div>
<div class="item">エレメント 3</div>
</div>
7.3 メニューのセンタリング
リアルプロジェクトでの使用例 — ナビゲーションメニューのセンタリング:
.nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-item:hover {
background-color: #575757;
}
<nav class="nav">
<a href="#" class="nav-item">ホーム</a>
<a href="#" class="nav-item">私たちに関して</a>
<a href="#" class="nav-item">サービス</a>
<a href="#" class="nav-item">連絡先</a>
</nav>
コードの説明:
.nav: ナビゲーションメニューのFlexコンテナで、要素を中央に整列させるよ.nav-item: 基本のスタイルが適用されたFlex要素（リンク）
GO TO FULL VERSION