Web文書は基本的に縦にどんどん連なっていく世界であり、横並びを実現するにはCSSで指定する必要がある。
横に並べるのにフレックスボックス（display: flex）を使う人は多いと思う。
そんな中でも固定幅と可変幅の組み合わせに便利なプロパティflex-basisをご紹介する。まったく カン・タン・だ！*1
※目次：
- display: blockは並ばない
- display: flexは均等幅で並ぶ
- パーセンテージで指定してみる
- サイドバーだけpx指定
- calc()でついに実現！
- flex-basisならさらに変更一箇所！！
CSSの基本はこちら
※参考：【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと
display: blockは並ばない
HTML要素は主に幅を持つdisplay: blockと幅を持たないdisplay: inlineで構成されている。
display: blockの要素はデフォルトではページ全幅を持ち、基本的に上から下にどんどん連なっていく。
<ul> <li>1.左カラム</li> <li>2.右カラム</li> </ul>
例えばこのli要素はdisplay: blockなので…
こんな感じで縦に連なっていく。
display: flexは均等幅で並ぶ
li要素の親要素であるul要素にdisplay: flexを指定すると、子要素のli要素は横に並んでくれる。
この時、幅は親要素から均等幅に割られる。
ul { display: flex; }
こんな感じ
パーセンテージで指定してみる
サイドバーなので左側を短くしたい。パーセンテージで指定するか。20%、80%くらいかな。
ul { display: flex; } ul li:nth-child(1){ width: 20%; } ul li:nth-child(2){ width: 80%; }
見た感じはいいのだが、問題はページの幅を変えるとサイドバーも本文も可変してしまう。
これだと見る環境によってサイドバー内で予期せぬ改行が発生することも。
できればサイドバーだけを固定幅にして、本文は可変にしたいものだ。
サイドバーだけpx指定
サイドバーだけに絶対値であるpxを指定するとどうだろうか。200pxくらいかな。
ul { display: flex; } ul li:nth-child(1){ width: 200px; }
こんな感じになった。
一見良さそうに思えるのだが、ページ幅を変えるとジワリジワリとサイドバーが可変している。
うーむ。完全な固定にはならないようだ。
calc()でついに実現！
css関数のcalc()で引数の中に計算式を入れられる。
これでサイドバーは固定幅の200px、本文は100%から200pxを引く。
ul { display: flex; } ul li:nth-child(1){ width: 200px; } ul li:nth-child(2){ width: calc(100% - 200px); }
そうすると…お、ついに実現した！！！
ページ幅を変えてもサイドバーは完全に変わらない！我々はついに固定幅と可変幅の組み合わせを手に入れた！！
flex-basisならさらに変更一箇所！！
さて、このままでも実現できているのだが、もう一つの書き方の方がベターだということがわかった。
display: flexに用意されているプロパティflex-basis。このプロパティはauto（成り行き）という値が指定できる。
ul { display: flex; } ul li:nth-child(1){ flex-basis: 200px; } ul li:nth-child(2){ flex-basis: auto; }
見ての通り、この書き方だと先ほどと同じ固定幅＋可変幅を実現できる。しかもそれだけではない！
この書き方だと、例えばサイドバーの幅を150pxに変更したい場合、flex-basis: 200px;の一箇所だけを150pxと書き換えればOK！
先ほどのcalc()の場合は変更箇所は二箇所になるのでこちらの方がシンプル！！
display: flexを使用する時は積極的に使っていきたい！
以上、まったくカン・タン*2な、flex-basisのご紹介でした。
※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com
