HTML/CSS

2021.09.26

[css]flexboxを用いて固定+可変にする方法

メインコンテンツ + サイドバーのような構造

サイトでよく見かけるレイアウトとしてメインコンテンツ+サイドバーの2カラムのものがあると思います。

そして要素を横並びにする方法としてflexboxが挙げられるのですが、横幅の短いサイドバーの方はデザイン崩れ防止や見えやすさのためにもサイズを変えずに固定したい時があります。

そうしたflexboxを用いた状況で固定+可変のレイアウトを実現する方法をご紹介します。

コンテンツを横に並べた場合
擬似要素を横に並べた場合

コンテンツを横に並べた場合

HTML

<div class="flex">
  <div class="main">可変</div>
  <aside class="side">100px固定</aside>
</div>

</div>

CSS

.flex {
  display: flex;
}

.main {
  flex: 1;
}

.side {
  width: 100px;
}

.flex {

display: flex;

}

.main {

flex: 1;

}

.side {

width: 100px;

}

必要最低限のコードとなります。固定させたい方にwidthで横幅を指定します。

しかしこのままでは固定部分を除いた残りのスペースいっぱいに可変部分が表示されません。そこで可変にしたい方にflex:1;を指定します。

flex:数値;と設定した場合、flex-grow:数値;と解釈されます。
flex-growとは、親要素(サンプルでいうと.flexを指定した要素)に空きスペースがあった場合にflex-growを指定した要素(サンプルでいうと.mainを指定した要素)が他の子要素に対してどれくらい伸びるかを指定するプロパティです。

初期値はflex:0;なので横幅いっぱいには表示されなかったというわけです。

他の方法も！

CSS

.main {
  width: calc(100% - 100px);
}

.side {
  width: 100px;
}

.main {

width: calc(100% - 100px);

}

.side {

width: 100px;

}

ベタではありますが、可変にしたい要素のwidthの値を「親要素の横幅(100%) – 固定したい要素の横幅」で直接指定することでも再現可能です。ここで出てくるcalc関数ですが、ざっと言うとCSSで演算ができる関数です。単位が異なっても利用でき、今回のような可変のコンテンツがある場合に重宝します。

擬似要素を横に並べた場合

See the Pen flexbox-flex by nanase webdesigner (@nanase-777) on CodePen.

HTML

<div class="flex-normal flex-shrink">Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>

1	<div class="flex-normal flex-shrink">Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>

CSS：抜粋したもの

.flex-normal {
  display: flex;
  margin-bottom: 20px;
}

.flex-shrink::before,
.flex-shrink::after {
  flex-shrink: 0;
}

.flex-normal {

display: flex;

margin-bottom: 20px;

}

.flex-shrink::before,

.flex-shrink::after {

flex-shrink: 0;

}

before/after要素のwidthを固定したいところですが、サンプルのようにただ並べただけでは無視され縮んでしまいます。
テキスト本体は何の要素にも囲まれていないのでCSSでの対応が不可です。となるとbefore/after要素に対応が必要となりますがコンテンツを横に並べたパターンのようにflex:1;では解決されません。

そんなときはflex-shrink:0;を指定します。

flex-shrinkとは、親要素(サンプルでいうと.flex-normalを指定した要素)にスペースが「ない」場合にflex-shrinkを指定した要素(サンプルでいうとbefore/after要素)が他の子要素に対してどれくらい「縮む」かを指定するプロパティです。

初期値はflex-shrink:1;なので縮んでしまったというわけです。0に変更し縮まないようにします。

以上で、flexboxを用いて固定+可変にする方法の紹介を終わります。他にも見つけ次第、追加していこうと思います。