CSS3: justify-content プロパティ - ボックス内子要素の主軸方向の配置方法

■ 概要

項　　目説　　明
記述形式 セレクタ {justify-content: 値 }
値 の形式 flex-start，flex-end，center，space-between，space-around
初 期 値 flex-start
対応ブラウザー C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 複数行フレキシブル・コンテナ
継　　承 しない

■ 解説

justify-content プロパティ は，フレキシブル・コンテナ内の行ボックスの 主軸（main-axis）方向の配置方法 を指定します。 　これは，副軸（cross-axis）方向の配置方法を指定する align-content プロパティ と対を成すものです。

指定できる値の形式は，以下のとおりです。

値説　　明
flex-start フレキシブル・コンテナの開始位置で揃えます。　最初の子要素の主開始端（main-start）をフレキシブル・コンテナの主開始端に合わせます。　それ以後の子要素も前の子要素に合わせて間隔を空けずに配置します。
flex-end フレキシブル・コンテナの終端位置で揃えます。　最後の子要素の主終了端（cross-start）をフレキシブル・コンテナの主終了端に合わせます。　それ以前の子要素も後の子要素に合わせて間隔を空けずに配置します。
center フレキシブル・コンテナの中央位置に揃えます。　すべての子要素を間隔を空けずに並べた上，主開始端 と 主終了端でフレキシブル・コンテナとの間に同じだけのスペースが空くように配置します。
space-between フレキシブル・コンテナ内に等間隔に子要素を並べます。　フレキシブル・コンテナ内に余白ができない場合には，flex-start を指定した場合と同じです。　それ以外では，最初の子要素の主開始端をフレキシブル・コンテナの主開始端に合わせ，また，最後の子要素の主終了端をフレキシブル・コンテナの主終了端に合わせます。　残りの子要素は，これらと等しい間隔が空くように順に配置します。
space-around フレキシブル・コンテナ内に最初の子要素の前と最後の子要素の後に半分の間隔を空けて子要素を等間隔に行を並べます。　フレキシブル・コンテナ内に余白ができない場合には，center を指定した場合と同じです。　隣り合う子要素の間隔が等しく最初の子要素の前と最後の子要素の後にその半分の間隔が空くように配置します。

なお，フレキシブル・コンテナと行ボックスの配置に関しては，多数の用語 が定義され，用いられておりますので，これらについての知識は必須です。

■ 使用例（ justify-content プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   .bc1 {background-color: green; }
   .bc2 {background-color: maroon; }
   .bc3 {background-color: blue; }
   .bc4 {background-color: red; }

   div.fwrapp {
      margin: 20px 10px;
      width: 800px;
      display: flex;
      flex-flow: row nowrap;
      background-color: #e0e0e0;
   }

   div.fwrapp div {
      width: 150px;
      height: 35px;
      color: #ffffff;
      font-size: 25px;
      text-align: center;
      padding-top: 10px;
   }

   div.justify1 { justify-content: flex-start; }
   div.justify2 { justify-content: flex-end; }
   div.justify3 { justify-content: center; }
   div.justify4 { justify-content: space-between; }
   div.justify5 { justify-content: space-around; }
-->
</style>
HTML
<body> ～ </body>		 
<div class="fwrapp justify1">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp justify2">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp justify3">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp justify4">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>
<div class="fwrapp justify5">
   <div class="bc1">1</div>
   <div class="bc2">2</div>
   <div class="bc3">3</div>
   <div class="bc4">4</div>
</div>

ブラウザー 表示例
1
2
3
4
↑ { justify-content: flex-start; } の表示 ↑
1
2
3
4
↑ { justify-content: flex-end; } の表示 ↑
1
2
3
4
↑ { justify-content: center; } の表示 ↑
1
2
3
4
↑ { justify-content: space-between; } の表示 ↑
1
2
3
4
↑ { justify-content: space-around; } の表示 ↑

■ 備考

【参考ページ】