フレックスボックス（flexbox）とは、大きさがフレキシブルに伸縮するボックスで、多様なレイアウトを実現するためのCSS3の新しいレイアウトモジュールです。
今回は、flexboxのためのプロパティを紹介したいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
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（デフォルト値）、単位なしの整数 |
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アイテムはマージンの相殺が起こらないという特徴があります。
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アイテムに関する要素で使用できます。
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>
両端揃えの均等間隔で表示されました。
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の割合で膨張されます。
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の配分で収縮されます。
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です。
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>
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>
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>
INTERNOUS,inc. All rights reserved.
