CSS【 flex 】～フレックスボックス
フレックスボックス（flexbox）とは、大きさがフレキシブルに伸縮するボックスで、多様なレイアウトを実現するためのCSS3の新しいレイアウトモジュールです。
今回は、flexboxのためのプロパティを紹介したいと思います。
1. flexboxのためのプロパティ
flexboxレイアウトは、親要素のdisplayプロパティにflexという値を指定して使用します。
親要素に display: flex と指定すると、それがflexコンテナとよばれるものになり、その中の子要素は自動的にflexアイテムとなります。
そして、flexコンテナの大きさが変わると、中身のflexアイテムの大きさもフレキシブルに変わってレイアウトされます。
flexboxを作成する際に使用するプロパティについては、flexコンテナだけに指定できるプロパティと、flexアイテムだけに指定できるプロパティとに分かれています。
flexコンテナ（親要素）で指定するプロパティは、次の通りです。
| display |
値：flex、inline-flex
（displayプロパティにflexまたはinline-flexを指定すると、flexboxとなる） |
| justify-content |
アイテムの横方向の揃え方を指定
値：flex-start（デフォルト値）、flex-end、center、space-between、space-around |
| flex-direction |
アイテムの配置の方向を指定
値：row（デフォルト値）、row-reverse、column、column-reverse |
| flex-wrap |
アイテムの改行の有無を指定
値：nowrap（デフォルト値）、wrap、wrap-reverse |
| flex-flow |
ショートハンドプロパティ
flex-directionの値とflex-wrapの値をまとめて指定 |
| align-items |
アイテムの縦方向の揃え方を指定
値：stretch（デフォルト値）、flex-start、flex-end、center、baseline |
| align-content |
アイテムが複数行の場合の縦方向の揃え方を指定
値：stretch（デフォルト値）、flex-start、flex-end、center、space-between、space-around |
flexアイテム（子要素）で指定するプロパティは、次の通りです。
| flex-grow |
アイテムの膨張率を指定
値：単位なしの係数（デフォルト値は0でマイナスは指定不可） |
| flex-shrink |
アイテムの収縮率を指定
値：単位なしの係数（デフォルト値は1でマイナスは指定不可） |
| flex-basis |
横に並べる場合はアイテムの幅（width）、縦に並べる場合はアイテムの高さ（height）を指定
値：auto（デフォルト値）、単位付きの数値 |
| flex |
ショートハンドプロパティ
flex-growの値、flex-shrinkの値、flex-basisの値をまとめて指定 |
| align-self |
アイテム１つずつを個別に指定
値：auto（デフォルト値）、flex-start、flex-end、center、baseline、stretch |
| order |
アイテムの表示の順番を指定
値：0（デフォルト値）、単位なしの整数 |
▲目次へ戻る
2. display:flex
section要素をdiv要素で囲み、そのdiv要素にdisplay:flexを指定すると、このdiv要素がflexコンテナとなります。
そして、子要素のsection要素は、自動的にflexアイテムとなります。
ソースは次の通りです。
（CSS）
div#sample {display:flex;}
div#sample section {
margin: 10px;
background: #FF9696;}
（HTML）
<div id="sample">
<section>
flexアイテム
テキストテキストテキスト
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
</div>
上の例ではdisplay:flexを指定していますが、display:inline-flexを指定すると、インラインの特徴を持つflexboxとなります。
1番目のflexアイテムはテキストが長いため、他のflexアイテムより幅が広くなっています。
margin:10pxをしているので、各アイテムの間隔が空いていますが、マージンを指定しない場合は、各flexアイテムはすき間なくくっついて表示されます。
また、flexアイテムはマージンの相殺が起こらないという特徴があります。
▲目次へ戻る
3. flex-basisプロパティ
flexアイテムにflex-basisプロパティで、ベースとなる幅を指定すると、コンテンツの内容に関係なくその幅で揃えることができます。
（但し、画像や長い英単語など、固有のサイズがあるものは、それより小さくできない場合もあります。）
先ほどのflexboxについて、section要素にflex-basis:100pxを指定すると、次のようになります。
ソースは次の通りです。
（CSS）
div#sample {display:flex;}
div#sample section {
margin: 10px;
flex-basis:100px;
background: #FF9696;}
（HTML）
<div id="sample">
<section>
flexアイテム
テキストテキストテキスト
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
</div>
flexコンテナの幅やブラウザの大きさの関係で、各flexアイテムに100pxの幅を確保できない場合は、flexアイテムは縮小されて表示されます。単にwidthプロパティで幅を指定した場合に比べてフレキシブルです。
flex-basisプロパティの値は、次の通りです。
| auto |
デフォルト値（自動調整） |
| サイズ |
単位を付けた数値 |
| ％ |
flexコンテナ（親要素）に対する割合 |
flex-basisプロパティの値は、継承されません。
また、flex-basisプロパティは、flexアイテムに関する要素で使用できます。
▲目次へ戻る
4. justify-contentプロパティ
justify-contentプロパティは、水平方向の揃え方を指定します。
flexアイテムが縦に並んでいる場合（flex-direction: columnを指定している場合）は、上下方向の揃え方を指定します。
justify-contentプロパティの値は、次の通りです。
| flex-start |
デフォルト値
左揃え
（縦並びの場合は上揃え） |
| flex-end |
右揃え
（縦並びの場合は下揃え） |
| center |
center中央揃え |
| space-between |
両端揃えで均等間隔 |
| space-around |
両端揃えで均等間隔かつ両端に半分の間隔をあける |
justify-contentプロパティの値は、継承されません。
また、justify-contentプロパティは、flexコンテナに関する要素で使用できます。
先ほどのflexboxについて、div要素（flexコンテナ）にjustify-content: space-betweenを指定すると、次のようになります。
ソースは次の通りです。
（CSS）
div#sample {
display:flex;
justify-content: space-between;}
div#sample section {
margin: 10px;
flex-basis:100px;
background: #FF9696;}
（HTML）
<div id="sample">
<section>
flexアイテム
テキストテキストテキスト
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
</div>
両端揃えの均等間隔で表示されました。
▲目次へ戻る
5. flex-growプロパティ
flex-growプロパティは、flexアイテムの膨張率を指定する際に使用するプロパティです。
flexアイテムのサイズは、基本的にはコンテンツの内容が基準となりますが、スペースに余裕がある時など、flex-growプロパティを使ってflexアイテムの幅を膨張させることができます。
flex-growプロパティの値は、次のように指定します。
| 係数 |
0以上の単位なしの数値（数が大きいほど膨張率が高くなる）
デフォルトは0（膨張なし） |
flex-growプロパティの値は、継承されません。
また、flex-growプロパティは、flexアイテムに関する要素で使用できます。
flexアイテム全てにflex-grow:1をそれぞれ指定すると、flexアイテムはflexコンテナのスペースいっぱいに膨張して、同じ幅に揃います。
justify-content: space-betweenを指定した場合と同じような結果となります。
また、flex-growを、特定のflexアイテムだけに指定することもできます。
先ほどのflexboxのアイテムを3つにして、最初のアイテムのみflex-grow:5、残りのアイテムにflex-grow:1を指定すると、次のようになります。
ソースは次の通りです。
（CSS）
div#sample {display:flex;}
div#sample section {
margin: 5px;
flex-basis:100px;
flex-grow:1;
background: #FF9696;}
div#sample section:nth-child(1) {flex-grow:5;}
（HTML）
<div id="sample">
<section>
flexアイテム
テキストテキストテキスト
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
</div>
親要素のスペースに余裕があれば、最初のアイテムには5、他のアイテムは1の割合で膨張されます。
▲目次へ戻る
6. flex-shrinkプロパティ
flex-shrinkプロパティは、flexアイテムの収縮率を指定する際に使用するプロパティです。
スペースに余裕がない時などに、flex-shrinkプロパティを使って、flexアイテムを収縮することができます。
flex-shrinkプロパティの値は、次のように指定します。
| 係数 |
0以上の単位なしの数値（数が大きいほど収縮率が高くなる）
デフォルトは1（状況に合わせて収縮される） |
flex-shrinkプロパティの値は、継承されません。
また、flex-shrinkプロパティは、flexアイテムに関する要素で使用できます。
flex-shrinkプロパティを、特定のflexアイテムにのみ指定すると、そのアイテムだけ収縮率を変えることができます。
先ほどの3つのflexboxのアイテムのうち、最後のアイテムにflex-shrink: 5と指定すると、次のようになります。
ソースは次の通りです。
（CSS）
div#sample {display:flex;}
div#sample section {
margin: 5px;
flex-basis:500px;
background: #FF9696;}
div#sample section:nth-child(3) {flex-shrink:5;}
（HTML）
<div id="sample">
<section>
flexアイテム
テキストテキストテキスト
</section>
<section>
flexアイテム
</section>
<section>
flexアイテム
</section>
</div>
親要素のスペースに余裕がない時に、他のアイテム1に対して最後のアイテム5の配分で収縮されます。
▲目次へ戻る
7. flexプロパティ
flexプロパティは、flex-growプロパティ、flex-shrinkプロパティ、flex-basisプロパティの３つをまとめて指定できるショートハンドプロパティです。
flex-growプロパティ、flex-shrinkプロパティ、flex-basisプロパティの３つプロパティは、いずれもflexibility（柔軟性）を指定するプロパティです。
他のショートハンドプロパティと同様に、値を半角スペースで区切って記述します。
flex : none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
| ： または
|| ： 値が１つは必要で順不問
? ： 省略可能
例えば、
flex: 100px → flex-basis: 100px;
flex: 2 5 → flex-grow: 2; flex-shrink:5;
flex: 2 → flex-grow: 2;（flex-shrinkは省略可能のため、単位なしの数値が1つの場合はflex-growの指定となります。）
また、値を3つとも指定する場合は、flex: 2 5 100px でも flex: 100px 2 5 でも同じ指定となります。
flex-growプロパティとflex-shrinkプロパティだけ、「grow → shrink」という書き順が決まっていて、flex-basisプロパティは、どこで指定してもOKです。
▲目次へ戻る
8. flex-wrapプロパティ
flex-wrapプロパティは、flexアイテムを折り返すかどうかを指定するプロパティです。
デフォルト値は nowrap（折り返さない）なので、親要素であるflexコンテナに収まらなければはみ出してしまいます。
これを、flex-wrap: wrap（折り返す）と指定すると、flexコンテナのスペース内で折り返して表示します。
flex-wrapプロパティの値は、次の通りです。
| nowrap |
デフォルト値
折り返さず１行で表示 |
| wrap |
flexコンテナに合わせて折り返して表示 |
| wrap-reverse |
wrapと同様に改行するが、折り返しが上側に向かう |
flex-wrapプロパティの値は、継承されません。
また、flex-wrapプロパティは、flexコンテナに関する要素で使用できます。
flex-wrap:wrap-reverseと指定すると、次のようになります。
ウィンドウ幅を狭くすると、flexアイテムが下から上へ折り返されて表示されます。
ソースは次の通りです。
（CSS）
div#sample {
display:flex;
flex-wrap:wrap-reverse;
justify-content:space-between}
div#sample section {
margin: 5px;
flex:1 0 200px;
background: #FF9696;}
（HTML）
<div id="sample">
<section>
１
</section>
<section>
２
</section>
<section>
３
</section>
<section>
４
</section>
<section>
５
</section>
<section>
６
</section>
</div>
▲目次へ戻る
9. flex-directionプロパティ
flex-directionプロパティは、flexアイテムの配置の方向を指定するプロパティです。
左から右への配置がデフォルトの並び方ですが、flex-directionプロパティを指定すると、他の方向へ並べることができます。
flex-directionプロパティの値は、次の通りです。
| row |
デフォルト値
左から右に水平方向で配置 |
| row-reverse |
右から左に水平方向で配置 |
| column |
上から下に垂直方向で配置 |
| column-reverse |
下から上に垂直方向で配置 |
flex-directionプロパティの値は、継承されません。
また、flex-directionプロパティは、flexコンテナに関する要素で使用できます。
flex-direction:columnと指定すると、次のように表示されます。
ソースは次の通りです。
（CSS）
div#sample {
display:flex;
flex-wrap:wrap;
flex-direction:column;
justify-content:space-between}
div#sample section {
margin: 5px;
flex:1 0 100px;
background: #FF9696;}
（HTML）
<div id="sample">
<section>
１
</section>
<section>
２
</section>
<section>
３
</section>
</div>
▲目次へ戻る
10. flex-flowプロパティ
flex-flowプロパティは、flex-wrapプロパティ、flex-directionプロパティをまとめて指定できるショートハンドプロパティです。
flex-flowプロパティの値も、他のショートハンドプロパティと同様に、値を半角スペースで区切って記述します。
指定する値は、１つでも２つでも良く、指定順も自由です。
指定しない値は、デフォルト値となります。
flex-flow:wrap-reverse row-reverseと指定すると、次のように表示されます。
flexboxのスペースに余裕がある場合は、折り返されずに右から左方向に並びます。
flexbox内に余裕がない場合は、折り返されながら下から上方向に向かって並びます。
ソースは次の通りです。
（CSS）
div#sample {
display:flex;
flex-flow: wrap-reverse row-reverse;}
div#sample section {
margin: 5px;
flex:1 0 200px;
background: #FF9696;}
（HTML）
<div id="sample">
<section>
１
</section>
<section>
２
</section>
<section>
３
</section>
<section>
４
</section>
<section>
５
</section>
<section>
６
</section>
</div>
▲目次へ戻る
