CSS【 flex 】 ~ フレックスボックス

A graphical model of fuel consumption

フレックスボックス(flexbox)とは、大きさがフレキシブルに伸縮するボックスで、多様なレイアウトを実現するためのCSS3の新しいレイアウトモジュールです。
今回は、flexboxのためのプロパティを紹介したいと思います。

目次

 1.flexboxのためのプロパティ
 2.display:flex
 3.flex-basisプロパティ
 4.justify-contentプロパティ
 5.flex-growプロパティ
 6.flex-shrinkプロパティ
 7.flexプロパティ
 8.flex-wrapプロパティ
 9.flex-directionプロパティ
10.flex-flowプロパティ

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 アイテム1つずつを個別に指定
値:auto(デフォルト値)、flex-start、flex-end、center、baseline、stretch
order アイテムの表示の順番を指定
値:0(デフォルト値)、単位なしの整数

▲目次へ戻る

2.display:flex

section要素をdiv要素で囲み、そのdiv要素にdisplay:flexを指定すると、このdiv要素がflexコンテナとなります。
そして、子要素のsection要素は、自動的にflexアイテムとなります。

flexアイテム
テキストテキストテキスト
flexアイテム
flexアイテム
flexアイテム
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を指定すると、次のようになります。

flexアイテム
テキストテキストテキスト
flexアイテム
flexアイテム
flexアイテム
flexアイテム

 
ソースは次の通りです。

(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を指定すると、次のようになります。

flexアイテム
テキストテキストテキスト
flexアイテム
flexアイテム
flexアイテム
flexアイテム

 
ソースは次の通りです。

(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を指定すると、次のようになります。

flexアイテム
テキストテキストテキスト
flexアイテム
flexアイテム

 
ソースは次の通りです。

(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と指定すると、次のようになります。

flexアイテム
テキストテキストテキスト
flexアイテム
flexアイテム

 
ソースは次の通りです。

(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プロパティの3つをまとめて指定できるショートハンドプロパティです。

flex-growプロパティ、flex-shrinkプロパティ、flex-basisプロパティの3つプロパティは、いずれもflexibility(柔軟性)を指定するプロパティです。

他のショートハンドプロパティと同様に、値を半角スペースで区切って記述します。

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

 |  : または
 || : 値が1つは必要で順不問
 ?  : 省略可能

例えば、
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 デフォルト値
折り返さず1行で表示
wrap flexコンテナに合わせて折り返して表示
wrap-reverse wrapと同様に改行するが、折り返しが上側に向かう

flex-wrapプロパティの値は、継承されません。
また、flex-wrapプロパティは、flexコンテナに関する要素で使用できます。

flex-wrap:wrap-reverseと指定すると、次のようになります。
ウィンドウ幅を狭くすると、flexアイテムが下から上へ折り返されて表示されます。

1

2

3

4

5

6

 
ソースは次の通りです。

(CSS)
div#sample {
	display:flex;
	flex-wrap:wrap-reverse;
	justify-content:space-between}
div#sample section {
	margin: 5px;
	flex:1 0 100px;
	background: #FF9696;}

(HTML)
<div id="sample">
  <section>
    1
  </section>
  <section>
    2
  </section>
  <section>
    3
  </section>
  <section>
    4
  </section>
  <section>
    5
  </section>
  <section>
    6
  </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と指定すると、次のように表示されます。

1

2

3

 
ソースは次の通りです。

(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>
    1
  </section>
  <section>
    2
  </section>
  <section>
    3
  </section>
</div>

▲目次へ戻る

10.flex-flowプロパティ

flex-flowプロパティは、flex-wrapプロパティ、flex-directionプロパティをまとめて指定できるショートハンドプロパティです。

flex-flowプロパティの値も、他のショートハンドプロパティと同様に、値を半角スペースで区切って記述します。
指定する値は、1つでも2つでも良く、指定順も自由です。
指定しない値は、デフォルト値となります。

flex-flow:wrap-reverse row-reverseと指定すると、次のように表示されます。
flexboxのスペースに余裕がある場合は、折り返されずに右から左方向に並びます。
flexbox内に余裕がない場合は、折り返されながら下から上方向に向かって並びます。

1

2

3

4

5

6

 
ソースは次の通りです。

(CSS)
div#sample {
	display:flex;
	flex-flow: wrap-reverse row-reverse;}
div#sample section {
	margin: 5px;
	flex:1 0 300px;
	background: #FF9696;}

(HTML)
<div id="sample">
  <section>
    1
  </section>
  <section>
    2
  </section>
  <section>
    3
  </section>
  <section>
    4
  </section>
  <section>
    5
  </section>
  <section>
    6
  </section>
</div>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です