CSS flex-basisとwidthの違い＆隙間の作り方

とても便利なCSSのflexboxですが、若干幅の調整にクセがあるなと思ったのでまとめておきます。

flexboxとは

CSSのflexboxに馴染みが無い方や復習したいかたはこちらをぜひ。横並びをもちろん、レイアウトをフレキシブルに組む優れものです。

日本語対応！CSS Flexboxのチートシートを作ったので配布します

こうしてflexの時に各要素の幅設定に使える、flex-grow、flex-shrink、flex-basisが若干ややこしいので掘り下げます。

flex-growとflex-shrink

どちらも正の整数値（1，2，3等）を値として、growは各要素の伸び率、shrinkは縮み率の相対値となります。

（例）各アイテムのflex-grow/flex-shrinkを以下に設定した場合、伸び方／縮み方の比率は1:4の比率になるので、1に設したものと比較して4と設定したものの方が4倍よく伸びる／縮みます。

これはあくまでも伸びる／縮む比率であって、幅や高さ自体の割合を指すものではありません。上記の場合、常に幅の比率が1:4になるのではなく、余っていた/収まりきらなかったスペースを、flex-grow/shrinkの値に応じて分配/減少させた結果です。

（例）1000pxの親タグに、100pxの幅を持つ子タグが並んでいた時。それぞれに①flex-grow:1と②flex-grow3を設定した時。
→余りスペースは1000px-200pxで800px。
→①は800pxの1/4が加わるので、100px+200pxで300px
→②は800pxの3/4が加わるので、100px+600pxで700px

独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル

注意なのは、flex-shrinkは下記条件を満たさないと意味を成しません。

flex-shrinkの条件
・すべてのフレックスアイテムの幅の合計がフレックスコンテナの主軸の幅よりも大きい場合
・flex-wrapプロパティの値がno-wrapの場合

flex-shrinkプロパティの意味と使い方

flexプロパティの初期値

flex-basisプロパティとは、フレックスコンテナ内のアイテムの基本幅を指定する際に使用するものですが、これらflex-grow、flex-shrink、flex-basisの順で一括設定できるのがflexというプロパティです。

設定してないプロパティを残さないためにも、このflexで一括指定することが推奨され、flexの初期値（initial）はflex: 0 1 autoです。

flexプロパティの意味と使い方

さらにややこしいのが、flexに値を一つだけ入れるとflex-growの値となりますが、設定していないflex-basisの値が初期値から変更されます。

flexに1つだけ数値を指定すると、flex-shrinkは1に、flex-basisは0になるそうです。

Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法

flex-basisとwidthの関係

上記を踏まえた上で、肝心のwidthとの関係を見てみます。

（auto 以外の）flex-basis と width (または flex-direction: column の場合は height) の両方が要素に設定されていた場合、 flex-basis が優先されます。

とあるため、それぞれ要素の幅を指定するものですが、widthを使う場合はflex-basisがauto（初期値）である必要があります。

flex-basis - CSS: カスケーディングスタイルシート | MDN

幅設定をしつつ隙間を設ける方法①

こうした幅設定をしつつ各要素に隙間を持たせる方法を紹介します。ここで気を付けることはこちら。

各要素に余白を設けると、端に来た要素の余白で全体の内側にも隙間ができる

要素の数が決まっていて、何番目の要素が端にくるの予想できる場合はその要素だけ余白を調整するなどできますが、レスポンシブなどで一列に入る数が変動する場合など少し面倒な点です。

そこで「端に余白を設けず、各要素同士には隙間を作りたい」場合、このようにすると楽です。

.flexWrap {
 margin: 40px -10px;
 }
 
 .flexItem {
   padding: 10px;
 }

box-sizing: border-box（widthをpaddingとborderを含めた値にする）と合わせてpaddingを各要素に設定しつつ、親要素にネガティヴマージン（marginにマイナス数値）することで相殺できます。​

【CSS】flexで複数のアイテムを並べたいとき、余白をスマートに記述する方法。 - Qiita

【CSS】box-sizing:border-boxの使い方｜効かない時は？

幅設定をしつつ隙間を設ける方法②

.flexWrap {
   margin: -10px -10px 0px;
}
.flexItem {
   width: calc(100% - 20px);
   margin: 10px 10px 0px;
}

各要素に背景色を設ける場合などpaddingで余白を設けることが難儀な場合、上記のネガティヴマージンに加え、演算を可能にする「calc()」と併用して幅計算させることで実現可能です。

[CSS ] Flexboxの折り返した要素にだけマージンをつけたい - ミギムキ

以上です！何か少しでもお役に立てば幸いです。