まとめて指定！flexbox子要素を決めるflexプロパティについて

Advertisements

flexプロパティは、display:flex;で親要素をflex要素にした後に、
その子要素(=flexアイテム)のあしらい3つを
一括指定するためのショートハンドのプロパティです。
「flex;1;」とか書いてあるだけだととってもわかりにくかったので、
改めて整理してまとめてみました。

そもそも、flex: 1;の意味とは？


/*flex:1;の指定の意味 */
flex-grow:1;
flex-shrink: 1;
flex-basis:0;

flex:1;と書くと、上記プロパティ3点を指定していることと同じになります。(3行が1行に…!)
書き方として、


flex:1 1 0;

と書いても、flex:1;と同様の意味の指定になります。

3点のプロパティそれぞれの意味は次のようになります。

Flex-growとは

Flex-growは、親要素にdisplay:flexをかけてflexアイテムを並べ、利用可能なスペースが余った時に、それをどう分配するかの比率を設定して、アイテムを伸ばします。

flex-grow初期値は0。
上記の画像の例の場合、flex-grow:2;は余ったスペースの2/3、flex-grow:1は余ったスペースの1/3が配分されます。
例えば、3つそれぞれがflex-grow:1;なら、余ったスペースの1/3分ずつ配分されます。

Flex-shrinkとは

Flex-growとは逆に、Flex-shrinkは子要素の幅を縮めるとき、どのくらい縮めるかの比率を設定します。

flex-shrinkの初期値は1。
上記の画像の例の場合、flex-shrink:2;は、flex-shrink:1;の2倍縮まります。
例えば、2つそれぞれがflex-shrink:1;なら、縮める必要のあるスペースの1/2ずつ縮まります。

Flex-basisとは

伸縮前の元々のサイズ(幅もしくは高さ)を定義します。

flex-basisの初期値はauto。
この値をauto以外にしていて、別途widthやheightプロパティでも幅や高さを設定している場合、flex-basisの方の値が優先されます。

Advertisements

flexショートハンドプロパティの指定方法

次に、flexプロパティの、指定方法による違いをまとめてみました。

flexの3つのプロパティの初期値(initial値)

元々のflexの３つのプロパティ初期値の設定をまとめると、
次のようになります。


flex-grow:0;　/*子要素は伸びない*/
flex-shrink:1;　/*全ての子要素が1なら均等に縮む*/
flex-basis:auto;　/*サイズはauto*/

flexショートハンドで省略をした時

少しトリッキーですが、flexショートハンドを使って指定する際、
一部の値を省略した場合は、指定した箇所以外のプロパティ値はそれぞれ


flex-grow:1;
flex-shrink:1;
flex-basis:0;

とみなされ、一部初期値とは異なる値になります。

flex-basis:0;とflex-basis:auto;の違いは何？と思い、実際に試してみると、
flex-basis:0;の場合、中身の量にかかわらず均等に割り切られ、収縮の仕方が異なるようです。

flexに値を1つだけ指定

ショートハンドでの省略時の初期値も踏まえて、flexショートハンドで値を1つだけ指定した場合の例は次のようになります。


/*flex:2;なら、flex-growの値が2に。 */
flex-grow:2;
flex-shrink: 1;
flex-basis:0;


/*flex:100px;(widthかheightになりうる値)なら、flex-basisの値が100pxに。 */
flex-grow:1;
flex-shrink: 1;
flex-basis:100px;

2つめのflex:100px;の例は、flex:0 0 100px; の指定とは異なり、
画面幅を変化させたときは、下記の図のように画面幅に合わせて伸縮します。

flexに値を2つ指定

次に、flexショートハンドで値を2つ指定した場合の例になります。


/*flex:1 2;(1つ、2つ目が数字)なら */
flex-grow:1;
flex-shrink: 2;


/*flex:1 0px; (1つ目が数字、２つ目がwidthかheightとして使える値)なら */
flex-grow:1;
flex-basis:0px;

flexに値を3つ指定

最後に、flexショートハンドで値を3つ指定した場合の例になります。


/*flex: 0 0 50%;なら */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;

Advertisements

2-4 flexの値そのほか

色々ありすぎて少し混乱してきそうですが、ほかにも下記のような指定例があります。


/*flex:auto; の場合*/
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto; /*親要素の幅に合わせるように伸縮 */


/*flex:none; の場合*/
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto; /*はみ出しても伸び縮みしない */

flexショートハンドプロパティの使い道

使い方を確認したところで、flexショートハンドを使った例をいくつかみてみたいと思います。

コンテンツの比率を固定


.side { flex: 1; }
.main { flex: 2; }

サイドとメインが常に1:2になります。

1つは固定幅、ほかは可変に。(ついでにheaderとfooterも追加)


.side { flex: 0 0 100px; } /*flex-basis:100px;でも同じ。*/
.main { flex: 1; }
.header .footer{flex:1 100%;}

まとめ

Flex-grow, Flex-shrink, Flex-basisのプロパティを一括指定する、flexのショートハンドプロパティについてご紹介しました。
ぱっと見こんがらがってきそうで全部は覚えにくいのですが、
flex:1;と１行指定するだけで時短になることもあると思うので、使えるようにしておくと便利なプロパティだと思います！

Advertisements