FlexBoxの使い方(5)〜flexプロパティについて(動画あり)

HTML&CSS
スポンサーリンク

flexプロパティの動画

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

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

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

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

flex grow factorという言葉が「CSS Flexible Box Layout Module Level 1」に書かれています。和訳するとflex伸長係数と訳されたりしています。
flex grow factor つまり「flex 伸長係数」について。
flexコンテナの幅が全てのflexアイテムを囲んでもまだ余りがある場合に、それぞれのflexアイテムに指定した伸長係数の値に従って、flexアイテムを拡大してflexコンテナ内をいっぱいにするものです。
その時に、伸長する基準になるものは当該flexアイテムの幅ではなく、flexコンテナにできる余白になります。余った空間をそれぞれのflex-growで指定した値に応じてflexアイテムの幅を伸長させて余った空間を無くす仕組みです。
レイアウトを固定幅で設計する場合は問題が起こりませんが、flexコンテナを可変レイアウトにするとなかなか困難になります。このような場合に非常に便利に使える仕組みです。

flexアイテムの拡大

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

次のサンプルはflexアイテムにflex-growプロパティを設定してflexコンテナいっぱいになるようにしたものです。クリーム色の背景色が見えなくなりました。
grow1
このサンプルはflex-growの値を全て「1」として均一に幅を広げています。

flex-growの設定方法

  • flex-growを各flexアイテムに対して設定します
  • flex-growの値はすべて1にします。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となります。

値は0以上の整数を使用します。
指定した値の比率で余った空間を分配します。
0の時は拡大しません。
flex-growの指定が無いときは0を指定した状態になります。

flex-growプロパティの詳細

名前 flex-grow


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

flexアイテムの縮小

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

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

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

flex-shrinkの設定方法

  • flex-shrinkを各flexアイテムに対して設定します
  • flex-shrinkの値はすべて1にします。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以上に伸長します。
basis1

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

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

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 のキーワード値のいずれかを使います。
値が2つの場合
最初の値は単位なしの数字でなければならず、 flex-grow として解釈されます。
2つ目の値は以下のうちの1つです。
単位なしの数字の場合: flex-shrink として解釈されます。
width として有効な値の場合: flex-basis として解釈されます。
値が3つの場合
最初の値は単位なしの数字でなければならず、 flex-growとして解釈されます。
2つ目の値は単位なしの数字でなければならず、 flex-shrink として解釈されます。
3つ目の値は width として有効な値でなければならず、 flex-basisとして解釈されます。
DogRoboの寝床は汚いアパートメントの部屋の一角にある。そこには3台のロボットが置かれている。少し前まではもう一台「Kuma5rou」ロボットが居た。
「Kuma5rou」はコンピュータを持たない前近代型ロボットだったこともあり、主動力モーターが発火したものだから早速クズ鉄行きになってしまった。
dog-grow
そんな悲しい出来事をよそに、残りの3台のロボットは自分の領土について言い争いをしていた。
結局公平に分け合うには「Kuma5rou」の居場所を3等分することだと結論づけた。
さっそくflex-grow:1の設定をそれぞれの縄張りプログラムに入力することにした。

Web動画記事一覧

タイトルとURLをコピーしました