今日のお昼は、カレーヌードルでした。
いつもシーフードとカレーで悩みます。

どうもバナナです。

リキッドレイアウトで片方の幅は固定で可変させたい時ってありますよね。
ちなみにこのブログもサイドバーが固定幅のまま可変するようになっています。

今回は、その方法を紹介したいと思います。

flexを使って片方の幅を固定にする方法

デモはこちら

HTML

<div class="wrap">
  <div class="main">メインコンテンツ</div>
  <div class="side">サイドバー</div>
</div>

CSS

.wrap{
  display: flex;
}
.main{
  flex: 1;
  margin-right: 32px;
}
.side{
  width: 240px;
}

この方法とはまた別のアプローチでも片方を固定幅にすることができます。

calc()を使って片方を固定する方法

デモはこちら

HTML

<div class="wrap">
  <div class="main">メインコンテンツ</div>
  <div class="side">サイドバー</div>
</div>

CSS

.wrap{
  display: flex;
}
.main{
  margin-right: 32px;
  width: calc(100% - 272px);
}
.side{
  width: 240px;
}

まとめ

flexで片方の幅を固定する方法でした。

flexは本当に便利ですよね。
まだまだ使いこなせていないので、極めていきたいですね。

では、今回はこの辺で。
またね。