FlexBoxの使い方（５）〜flexプロパティについて（動画あり）

flexプロパティの動画

flexプロパティについて解説します。

display:flexを指定したときflexコンテナはblockの性格を持ち、親要素の幅いっぱいに広がります。flexコンテナでflexアイテムをきれいに囲むためにはflexアイテムの幅をそれぞれ計算してflexコンテナの幅を決めなければいけません。つまり、flexコンテナにflexアイテムを並べても余計なスキマが空いたり、逆にflexコンテナにflexアイテムが入りきれない場合もでてきます。

＊復習ですが、flexコンテナとflexアイテムの関係は下図のようになります。

ここでは、flexアイテムを拡大、縮小してflexコンテナにぴったりと収める方法の解説をおこないます。
flexアイテムの拡大は自分自身を基準に拡大するのではなく、余った余白をflex-growで指定した比率で分配して拡大するものです。

flexアイテムの拡大

次のサンプルはflexコンテナのサイズが大きすぎて右端に余計な空白ができたものです。クリーム色の背景色部分が空白部分です。

次のサンプルはflexアイテムにflex-growプロパティを設定してflexコンテナいっぱいになるようにしたものです。クリーム色の背景色が見えなくなりました。

このサンプルはflex-growの値を全て「１」として均一に幅を広げています。

• 右端に余白が余ったサンプル
• flex-growを使ったサンプル

flex-growの設定方法

• flex-growを各flexアイテムに対して設定します
• flex-growの値はすべて１にします。flex-grow:1
• 全てのflexアイテムが均等に拡大します

このサンプルではflexコンテナの幅は1200px、各flexアイテムの幅(width)は300pxで、それぞれ左右に10pxのパディングがあります。また2番目のflexアイテムには左右に10pxのマージンがあります。
計算すると 300px*3+10px*2*3+10px*2 = 980pxとなります。余りの空白は1200px-980px = 220pxとなります。
すべてのflexアイテムはflex-grow:1ですから220pxを3等分した値をそれぞれのflexアイテムの幅（width）に付け足すことになります。220/3=73.333333ですからflexアイテムの幅は373.3333333pxとなります。

flex-growプロパティの詳細

名前 flex-grow

値
初期値 0
適用対象 flex アイテム
継承 されない
媒体 visual
算出値 指定値
アニメーション 可
flex-grow プロパティは、 flex 伸長係数を 供された に設定する。 負数は無効です。

flexアイテムの縮小

flexコンテナの幅を縮めたときflexアイテムの値を固定にしておくとあふれ出す結果になります。
この場合も拡大と同様の考え方でflex-shrinkが用意されています。
領域の不足分をflex-shrinkで指定した値の比率で縮小するものです。

次のサンプルはブラウザの幅を縮めてflexアイテムがはみ出した状態になっています。

次のサンプルはブラウザの幅に応じてflex-shrinkを使ってflexアイテムを縮小させたものです。

• すべてのflexアイテムにflex-shrink:0を設定したサンプル
• すべてのflexアイテムにflex-shrink:1を設定したサンプル

flex-shrinkの設定方法

• flex-shrinkを各flexアイテムに対して設定します
• flex-shrinkの値はすべて１にします。flex-shrink:1
• 全てのflexアイテムが均等に縮小します

flex-shrink プロパティの詳細

名前 flex-shrink

値
初期値 1（0ではないことに注目）
適用対象 flex アイテム
継承 されない
媒体 visual
算出値 指定値
アニメーション 可
flex-shrink プロパティは、 flex 縮短係数を 供された に設定する。 負数は無効です。

flex-basisプロパティ

flex-basisプロパティは、横方向のフローではflexアイテムの幅を決めます。また縦方向のフローでは高さを決めます。 その値は width, height プロパティと同様な単位を使用します。

flex-basis:200pxと設定しても、flex-grow:1の値を設定した場合flexアイテムは200px以上に伸長します。

flex-basis:200pxと設定すると、widthで指定した値を無視して200pxとなります。更にflex-grow:0とするとflexコンテナに余分なスキマができてもflexアイテムは伸長しません。

以上のことから　flex-grow:1 ; flex-shrink:1の指定がされるとwidthの値も、flex-basisの値も無視してflexアイテムの幅は伸縮します。縮小または伸長するときにflex-basisで指定した値に固定したい場合は flex-grow:0 または flex-shrink:0 とする必用があります。そうしないとflex-basisを使用する意味がなくなります。

• flex-grow:0;flex-shrink: 0;flex-basis: 200px;を設定したサンプル
• flex-grow:1;flex-shrink: 0;flex-basis: 200px;を設定したサンプル
• flex-grow:0;flex-shrink: 1;flex-basis: 200px;を設定したサンプル
• flex-grow:1;flex-shrink: 1;flex-basis: 200px;を設定したサンプル

flex-basis プロパティ

名前 flex-basis

値 main-size | <‘width’>
初期値 main-size
適用対象 flexアイテム
継承 されない
媒体 visual
算出値 指定値 — ただし，長さは絶対化される。
百分率 flex コンテナの内縁 主サイズに相対的
アニメーション width と同様

flexプロパティのショートハンド記述

flex プロパティは、 flex-grow, flex-shrink, flex-basis をまとめて指定します。

flex Shorthand

名前 flex
値 none | auto | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
初期値 個々のプロパティを参考
適用対象 flex アイテム
継承 個々のプロパティを参考
媒体 visual
算出値 個々のプロパティを参考
正準的順序 文法に従う

flexプロパティの値が1つ、2つ、3つ時それぞれの意味

値が1つの場合

単位なしの数値の場合: flex-grow として解釈されます。
widthとして有効な値の場合: flex-basis として解釈されます。
そのほかに、none, auto, initial のキーワード値のいずれかを使います。

DogRoboの寝床は汚いアパートメントの部屋の一角にある。そこには３台のロボットが置かれている。少し前まではもう一台「Kuma5rou」ロボットが居た。
「Kuma5rou」はコンピュータを持たない前近代型ロボットだったこともあり、主動力モーターが発火したものだから早速クズ鉄行きになってしまった。

そんな悲しい出来事をよそに、残りの3台のロボットは自分の領土について言い争いをしていた。
結局公平に分け合うには「Kuma5rou」の居場所を3等分することだと結論づけた。
さっそくflex-grow:1の設定をそれぞれの縄張りプログラムに入力することにした。

Web動画記事一覧

• Slickの導入方法　（動画あり）
• Web作成講座〜FlexBoxレイアウトでヘッダーを作成（動画あり）
• Web作成講座　FlexBoxレイアウトの動画
• Web作成講座　floatレイアウト1（動画あり）
• Web作成講座　floatレイアウト2 （コード解説　動画）
• Web制作講座　 Webフォント、inlin-block、marginの相殺について(動画あり）
• Web制作講座　 backgroundプロパティの説明(動画あり）
• CSS flex〜チートシート(動画あり)
• FlexBoxの使い方（7）〜 flex-wrapについて（動画あり）
• FlexBoxの使い方（５）〜flexプロパティについて（動画あり）
• FlexBoxの使い方（４）〜display:inline-flexについて（動画あり）
• FlexBoxの使い方（３）〜flexアイテムの順番を入れ替え（動画あり）
• FlexBoxの使い方（１）〜display:flexについて（動画あり）