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: 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>

▲目次へ戻る