【Flexbox】Flexアイテムのflexプロパティについて

display:flexプロパティで Flexboxにした際、
横並び(設定によって縦並び)になる子要素に設定出来る、flexプロパティについて解説します。

flexプロパティには、

  • flex-grow
  • flex-shrink
  • flex-basis

の3つの値がありますが、
以下のようにショートハンドを使ってまとめて記述することが可能です。


 
3つのプロパティの詳細について順番に解説していきます。
 

flex-growについて

flexプロパティの1つ目の値であるflex-growを設定すると、
フレックスアイテム(子要素)の合計幅がフレックスコンテナ(親要素)より少ない場合に
余剰として出来る隙間をコンテナが埋めるように伸びていきます。
(隙間が無くなります)

全アイテムのflex-growを1にする

サンプル(こちらから確認できます)

アイテムがコンテナ内の隙間を均等の比率で埋めるようになる。
※flexプロパティを1つだけ書いた場合、flex-growの値のみを設定したことになります。

 
アイテム毎にflex-growの値を変えた場合

サンプル(こちらから確認できます)
フレックスアイテムごとに隙間を埋める比率を設定することができます。

 

flex-shrinkについて

親要素であるフレックスコンテナの幅が全フレックスアイテムの合計幅より少なかったとき、
通常はコンテナからアイテムがはみ出しますがflex-shrinkを設定してやることで
コンテナからはみ出さないようにアイテムの幅を縮める形でコンテナ内に収まるようになります。

アイテムごとに設定した値によって縮める比率を決めることが出来ます。

その際、後述する3つ目のプロパティであるflex-basisが設定されていた場合、
その構成比率とflex-shrinkを掛け合わせた値が縮小率となります。

サンプル(こちらから確認できます)

サンプル 二番目
(はみ出したアイテムを均等の比率でコンテナに収める)

 
サンプル 三番目
(flex-shrinkの比率を変えている)

 

flex-basisについて

flex-basisを設定することでフレックスアイテムの基本の幅(ベースサイズ)を決めることが出来ます。
これによってテキストや画像などフレックスコンテナの内容量、有無に関係なく
px、%、em、remなどを指定し任意の幅を持たせることが出来ます。

サンプル(こちらから確認できます)

幅800pxのフレックスコンテナ内の空のdivタグ4つにそれぞれ基本幅を指定している(サンプル上)

 
値にautoを指定した場合の幅はそれぞれのアイテムの内容量によって設定される。
(flexプロパティを指定しないときと同じ状態)
autoを設定した時にwidth、heightなどを合わせて指定して決まった幅や高さを持たせる事も出来る (サンプル下)

Follow me!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください