主軸方向に対してサイズを伸縮させる
flex-grow: 0;
flex-shrink: 1;
flex-basis:auto ;
flex-growは、アイテムの合計サイズがコンテナーサイズよりも小さい場合に余った空白を各アイテムのサイズに指定の比率で振り分けてアイテムをコンテナーいっぱいに引き延ばす
比率を各アイテムに指定するのに係数でアイテム毎に指定する
例えば3つのアイテムで各々に０：１：２の割合で指定した場合
０（初期値）では振り分け対象としない
残りの２アイテムに対して余った空白を１：２の割合で振り分ける
これはあくまでも空白域サイズの分配比率であってアイテムサイズ自体の比率ではないので注意が必要です
flex-shrinkは、アイテムの合計サイズがコンテナーサイズよりも大きい場合にアイテムのサイズに指定した係数の比率で縮小しコンテナー内に収める
初期値は１
growは広げshrinkは縮める
flex-basisは、基準となるアイテムのサイズを指定する
数値はpx,em,%.clac()で指定する
注意点は、 width < flex-basis < min-width , max-width の関係になる
widthで指定したものよりflex-basisで指定したものが優先されるがmin,maxよりは優先度が低い
また、主軸方向が縦の場合はheightが対象となる
初期値はauto
flex-grow
各アイテムのflex-basisに100pxを設定して揃え、flex-growの設定での変化を検証してみた
コンテナーのサイズ600px、アイテムの合計サイズ300pxをflex-growでサイズを変えてコンテナーいっぱいに広げる
flex-growの値は同サイズでbasisのサイズを変えて設定
flex-growとflex-basisのサイズ関係を逆にしてみた
今回の検証ではflex-basisのサイズに空白のサイズをflex-growで振り分けた結果よりサイズ差が縮まっている
コンテナーのサイズを縮めてflex-wrapを適用してみた
contennerのサイズ width:200px;
この場合、flex-growは各行毎に伸縮するので空白の振りわける比率は意味を持たなくなり同じサイズで縦て並びになる
flex-shrink
flex-shrinkは数値が大きい方が収縮率が大きくなる
flex 一括指定
flexは３つのプロパティを一括で指定できる
注意点は指定していないプロパティは規定値が設定される
flex-grow省略時は初期値の0では無く1が設定される
flex: 1 ; flex-grow
flex: 1 1; flex-grow flex-shrink
flex: 1 200px; flex-grow flex-basis
flex: 1 1 200px; flex-grow flex-shrink flex-basis
左の指定と右の指定は同じになる
flex: auto; flex: 1 1 auto;
flex: initial; flex: 0 1 auto;
flex: none; flex: 0 0 auto;
flex: 600px; flex: 1 1 600px;
flex: 20; と記述した場合はgrowの値となりshrinkには1が、basisにはautoが設定される
flex: 300px;と指定した場合はgrowは1が設定されshrinkは1が設定される
width:300px;との違いはflexで指定した場合は、コンテナーのサイズにより伸縮する
コメント