【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

display: flex を指定すると Flexbox（フレックスボックス） を作れます。
今回から数回に分けて、Flexbox のためのプロパティを使ってみます。

Flexboxは、Flexible Box Layout Module の略称です。
幅や高さがフレキシブルに伸縮するボックスです。
floatプロパティより 簡単に横並びのレイアウトができたり、タブレットやスマホなどでは自動でボックスサイズを合わせてくれるのですごく便利です。

が、しかし（笑！）
Flexboxは これまでに仕様が大きく2回も変わったので、2つの古い仕様に対応したオールドブラウザがあり、ちょっと面倒くさいです。
（そのあたりは【18-5】でまとめる予定です）

しかも、まだ勧告されたわけではなく、勧告候補（Candidate Recommendation）。
コレ→ CSS Flexible Box Layout Module Level 1 _ W3C Candidate Recommendation

勧告までに、仕様が多少は変わるかもしれませんが、基本的な仕様はほとんどのブラウザですでに対応しています。

「Can I Use」で各ブラウザの対応状況を見ることができます。

スマホサイトならもう充分イケますね。Android4.3 が box仕様なのが弱点ですが...。
とにかく、IE9、10も利用が減るでしょうし、これからは Flexbox の出番も増えるはず。便利なので。
というわけで、今回から Flexbox の使い方についてまとめておきます。
正式勧告でまた若干仕様が変わっていたら、この記事も修正します（2016年8月記）

Flexbox に関しては、専用のプロパティがたくさんあるので 記事を分けます。

【18-1】Flexbox を使おう！（フレキシブルボックスのプロパティ）　←今日はココ

display: flex で「Flexコンテナ」を作ります。
flex-basis、flex-grow、flex-shrink、justify-contentプロパティを使ってみます。

【18-2】Flexbox内のボックスの配置方法を指定しよう

flex-wrap、flex-directionプロパティを使います。

【18-3】Flexbox内の縦（垂直）方向を揃えよう

align-items、align-self、align-contentプロパティを使います。

【18-4】Flexboxの orderプロパティで表示順を自由に変えよう

orderプロパティを使います。

（ちょっとメモ）Flexbox をシミュレーションできるサイト2件

シミュレーションしてみると、わかりやすい！

【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ

Flexboxの古い仕様に対応しているブラウザやベンダープレフィックスの書き方について。

というわけで、本日のINDEXです。今回は基本的なことを押さえます。

1. 基本の「Flexコンテナ」と「Flexアイテム」
2. フレキシブルボックスのための全プロパティ一覧
3. display:flex で「Flexコンテナ」を作ろう
4. flex-basisプロパティ で、ベースサイズを指定する
5. justify-contentプロパティで水平方向の揃え方を決める
6. Flexibility（柔軟性）を指定する flex-grow と flex-shrink
   1. スペースいっぱいに幅を揃えたいときは flex-grow:1
   2. flex-growプロパティで、特定のアイテムだけ幅を大きく
   3. flex-shrinkプロパティで、特定のアイテムだけ幅を小さく
7. ショートハンドプロパティ「flex」

基本の「Flexコンテナ」と「Flexアイテム」

Flexboxを作るには、まずフレキシブルにレイアウトしたい要素たちを親要素で囲むところから始めます。
この親要素に display: flex と指定すると Flexコンテナと呼ばれるものになり、中の子要素は（特に何も指定しなくても自動的に全部） Flexアイテム になります。

Flexコンテナの幅が変われば、中身のFlexアイテムの幅や高さがフレキシブルに変わってレイアウトされます。

Flexコンテナだけに指定できるプロパティと Flexアイテムだけに指定できるプロパティにはっきりわかれているのが注意点です。
次の一覧表でまとめてみました↓

フレキシブルボックスのための全プロパティ一覧

指定対象が Flexコンテナ（親）なら黄色、 Flexアイテム（子）ならブルーで色分けしてみました。
赤いテキストはデフォルト値です。

プロパティ	値	指定対象
display	flex　inline-flex （displayプロパティの値のうち flex または inline-flex を指定すれば、フレキシブルボックスを定義します）	Flexコンテナ
justify-content	アイテムの横方向の揃え方を指定。 flex-start　flex-end　center　space-between　space-around	Flexコンテナ
flex-grow	アイテムの膨張率を指定。 係数（単位無し。マイナス不可）デフォルトは0	Flexアイテム
flex-shrink	アイテムの収縮率を指定。 係数（単位無し。マイナス不可）デフォルトは1	Flexアイテム
flex-basis	アイテムの幅（width）を指定。縦に並ぶ場合は高さ（height）を指定。 単位付きの数値。デフォルトはauto	Flexアイテム
flex	flex-growの値　flex-shrinkの値　flex-basisの値 をまとめて書くショートハンドプロパティ	Flexアイテム
flex-direction	アイテムの配置の方向を指定。横方向か縦方向かなど。 row　row-reverse　column　column-reverse	Flexコンテナ
flex-wrap	アイテムが改行するかしないかを指定。 nowrap　wrap　wrap-reverse	Flexコンテナ
flex-flow	flex-directionの値　flex-wrapの値 をまとめて書くショートハンドプロパティ	Flexコンテナ
align-items	アイテムの縦方向の揃え方を指定。 flex-start　flex-end　center　baseline　stretch	Flexコンテナ
align-self	align-itemsの個別バージョン。アイテム1つずつを個別に指定できます。 auto　flex-start　flex-end　center　baseline　stretch	Flexアイテム
align-content	アイテムが複数行になった時の縦方向の揃え方を指定。 （justify-contentの縦バージョン。ただしstretchあり） flex-start　flex-end　center　space-between　space-around　stretch	Flexコンテナ
order	アイテムの表示の順番を変えられます。 整数（単位無し）デフォルトは0	Flexアイテム

今日はこの中の、dixplay:flex、flex-basis、justify-content、flex-grow、flex-shrink を使って、基本的な Flexbox を作ってみます。（残りのプロパティは次回以降で）

display:flex で「Flexコンテナ」を作ろう

下記のような構造でHTMLを組んでみます。
Flexアイテムにしたい <section>要素を6個作って、全部 <div>で囲み、そのdivには "container" というID名を付けました。

<div id="container">
<section>
<h1>1</h1>
<p>テキスト</p>
</section>

<!--以下、<section> が5個続きます。全部で6個にします-->

</div>

この <div id="container"> に display:flex を指定すると、これが Flexコンテナになります。
そして、子の section要素は全部 Flexアイテムに勝手になります。カンタンですね♪

div#container {display:flex}

★display:inline-flex もあり。これを指定すると、インラインの特徴を持つフレキシブルボックスになります。（今回は display:flex だけで解説して行きます）

この段階では、PCブラウザでの表示はこのようになっています。
（↓クリックでサンプルファイルが開きます）

1番目のFlexアイテムだけテキストのボリュームがあるので、他のFlexアイテムと違って幅が広くなってます。
各アイテムの間隔は margin:5px で指定しています。marginを指定しなければ、Flexアイテムはピッタリくっつきます。
また、Flexアイテムはマージンの相殺が起こらないという特徴があります。

flex-basisプロパティ で、ベースサイズを指定する

さきほどのサンプルでは、flexアイテム（子）のコンテンツ（テキストなど）が数字だけのものは、ぺったんこですね。
この Flexアイテムに flex-basisプロパティ を指定して、ベースになる幅を決めてやると、コンテンツの量に関わらずベースの幅で揃えることができます。
＊ただし、中身が画像など固定サイズがあるものならそれに従います。
＊また、長い英単語などでは、そのサイズより小さくなれない場合もあります。

アイテムが縦に並ぶ場合（flex-direction: columnのとき）は 高さのベースになります。（flex-direction は次回に詳細）

<section> に flex-basis:100px と指定してみると、

div#container section {flex-basis:100px}

このように、各アイテムの幅が100pxで統一されます。
（↓クリックでサンプルファイルが開きます）

ここで↑ブラウザウィンドウの幅を変えて、Flexアイテムの幅が変化するのを確認してください。

Flexコンテナの幅に余裕が無くて 各アイテムが幅100pxを確保できなければ、Flexアイテムは縮小されます。これが「フレキシブル」なところ。単に widthプロパティで指定したらこうなりませんね。

flex-basisは、あとで出てくる flex-grow、flex-shrink と共に Flexibility（柔軟性）を指定するプロパティ。
親となるFlexコンテナのスペース内で、各Flexアイテムが空いたスペースを埋めるために伸びたり縮んだりするときに、その伸縮性を調整するためのモノ。
flex-basisは、あくまでもベースになる幅（または高さ）を指定するだけで、width や height の指定のようにキッチリとサイズを固定するわけではありません。

Flexアイテムの幅をベースサイズで揃えたあと、flex-grow、flex-shrink を使って、特定のアイテムだけをベースサイズより膨張させたり縮小させたりもできます。

flex-basisプロパティの値のまとめです。

flex-basis の値
サイズ	単位を付けた数値で
％	flexコンテナ（親）に対するパーセンテージ
content	Indicates automatic sizing, based on the flex item’s content. flexアイテムの中身に基づいて自動的にサイズを指定します（って直訳）
auto	これがデフォルト

「content」という値が新しく追加されたようです。
が、これ、ほとんどのブラウザで適用されていないみたいなので、まだ使わないほうがいいかも（使い方もよくわからんｗ。autoとどう違うのかしら）
参考：CSS Flexible Box Layout Module Level 1 _flex-basis-property

値の継承	なし	適用できる要素	Flexアイテム な要素

justify-contentプロパティで水平方向の揃え方を決める

上↑のサンプルの Flexアイテムが左揃えになっているのは、justify-contentプロパティをまだ指定していなくて、デフォルトの 左揃え になっているから。

justify-contentプロパティは、横方向の揃え方を決めます。
Flexアイテムが縦に並んでいる時（flex-direction: columnのとき）は 縦方向の揃え方を指定します。

justify-content の値
flex-start	左揃え。これがデフォルト 縦に並んでいる時は上揃え
flex-end	右揃え 縦に並んでいる場合は下揃え
center	中央揃え
space-between	両端揃えの均等間隔
space-around	両端に半分のスペースがある均等間隔

値の継承	なし	適用できる要素	Flexコンテナ な要素

これはFlexコンテナに指定するプロパティです。
（さっきの flex-basis は、flexアイテムに指定するんだったよね。ヤヤコシイですねw）

サンンプルでは、justify-content: space-between と指定。

div#container {
	display:flex;
	justify-content: space-between}

で、このように、両端揃えの均等間隔になりました。
（↓クリックでサンプルファイルが開きます）

Flexibility（柔軟性）を指定する flex-grow と flex-shrink

Flexアイテムのサイズは、基本的には中身のコンテンツが基準になるのですが、さきほど flex-basisプロパティでベーズになるサイズを指定しましたね。

flex-basisの値は、Flexコンテナのスペースに余裕がある時は、ちゃんと効きます。
例えば flex-basis を 100px で指定したら、こんなふうに↓なってます。

でも、ウィンドウサイズを小さくして、スペースに余裕が無くなれば、アイテムは flex-basisで指定した値よりも小さくなります。これは flex-shrink がデフォルトの「1」だから。

ただしこれはコンテンツの内容によります。
長い英単語 や 画像 などがあるときは、アイテムがそのサイズより小さくなれない場合もあります。

flex-grow、flex-shrinkは、先ほどの flex-basis と一緒に Flexboxの Flexibility（柔軟性）を指定するプロパティです。

スペースに余裕があるとき、flex-growプロパティを使って、余裕のスペースにアイテムの幅を膨張させることができます。

スペースに余裕が無いときに、flex-shrinkプロパティを使って、特定のアイテムの 収縮分を増やすことができます。

ということで、flex-growプロパティはFlexアイテムの 膨張率 、
flex-shrinkプロパティは 収縮率 を指定します。

flex-grow の値
係数	0以上の単位無しの数字。マイナスは不可。 デフォルトは0 で膨張無し。flex-basis の値かコンテンツの幅に合わせます。 数が大きいほど膨張率が高くなります。

値の継承	なし	適用できる要素	Flexアイテム な要素

flex-shrink の値
係数	0以上の単位無しの数字。マイナスは不可。0で縮小無しです。 デフォルトは1 で状況に合わせて収縮されます。 数が大きいほど縮小率が高くなります。

値の継承	なし	適用できる要素	Flexアイテム な要素

スペースいっぱいに幅を揃えたいときは flex-grow:1

Flexアイテム全部に同じ flex-grow:1 を指定すると、Flexアイテムは Flexコンテナのスペースいっぱいに膨張して、同じ幅に揃います。
justify-content: space-between を指定していなくても、スペースいっぱいに広がります。

flex-grow は Flexアイテムに指定します。子要素のほうね。

div#container section {
	flex-basis:100px;
	flex-grow:1}

flex-growプロパティで、特定のアイテムだけ幅を大きく

flex-grow を、特定のFlexアイテムだけに指定すると、そのアイテムだけ膨張率を変えられます。
例えば、4つのアイテムのうち最初の1アイテムに flex-grow: 5 と指定すると、
親のスペースに充分余裕が有るときは、最初のアイテムには5、他のアイテムには1ずつの割合で膨張させるかんじになります。

サンプルの CSSです。

div#container section {flex-basis:100px; flex-grow:1}
div#container section:nth-child(1) {flex-grow:5}

flex-shrinkプロパティで、特定のアイテムだけ幅を小さく

flex-shrink を、特定のFlexアイテムだけに指定すると、そのアイテムだけ収縮率を変えることができます。
例えば、4つのアイテムのうち最後のアイテムに flex-shrink: 5 と指定すると、
親のスペースに余裕が無い時、他のアイテムが1ずつで、このアイテムだけ5を配分して収縮させるかんじになります。

サンプルの CSSです。

div#container section {flex-basis:100px; flex-grow:1}
div#container section:nth-child(4) {flex-shrink:5}

まとめてサンプルです。
ウィンドウサイズを変えて確認してみてください。
（↓クリックでサンプルファイルが開きます）

ショートハンドプロパティ「flex」

Flexibility（柔軟性）を指定する flex-grow 、 flex-shrink 、flex-basis の3つのプロパティをまとめるショートハンドプロパティ flex が用意されています。

今までやってきたショートハンドと同じく値を「半角スペース」で区切って書きます。 W3Cの構文は、このようになっています。

flex : none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

| は、どちらか1つだけって意味。
[ ] は、ひとまとまりという意味。
|| は、値が1つは必要だけど省略可能で、書く順序は問わないって意味。
? は、省略可能で0回または1回出現するという意味。flex-shrink は無くてもイイってことです。
（CSSの構文記号について詳しくはこちら：値の定義構文 - CSS | MDN）

ということで、
まず flex: none と書けば flex: 0 0 auto と同じになります（flex-grow と flex-shrink は 0、flex-basis: auto）

そして、デフォルトは flex: 0 1 auto です。
膨張率・縮小率を指定した後で、チャラにしたければこれを指定すれば一発OK。

各プロパティの値を書く場合は、例えば、
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-wrapプロパティ、flex-directionプロパティを使ってみます。
flexアイテムを折り返し表示させたり、縦方向に組んだりできて、けっこうオモシロイです。