クモのようにコツコツと

Webデザイナー イイダリョウのブログです。

固定幅と可変幅の組み合わせにはflex-basisが まったく カン・タン・だ!

Web文書は基本的に縦にどんどん連なっていく世界であり、横並びを実現するにはCSSで指定する必要がある。
横に並べるのにフレックスボックス(display: flex)を使う人は多いと思う。
そんな中でも固定幅可変幅の組み合わせに便利なプロパティflex-basisをご紹介する。まったく カン・タン・だ!*1

※目次:

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のご紹介でした。

*1:ブルワーカー

*2:ブルワーカー