Flexboxを使う時に覚えておきたい！固定幅と可変幅を組み合わせたレイアウトを簡単に実装する方法

幅が決まっている固定要素と幅が決まっていない柔軟な可変要素をうまく組み合わせたレイアウトをFlexboxで実装するCSSのテクニックを紹介します。

画像とテキストを並べたり、ナビゲーションだったり、横に並べた際に高さが異なってしまったり、さまざまなレイアウトを解決するテクニックです。

Making width and flexible items play nice together

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 短い答え
• 詳しく解説
• さらに詳しく解説
• 最終的な答え
• このテクニックを使った応用技

短い答え

flex-shrinkとflex-basisを使用します。

詳しく解説

下記のように、widthが決まっている画像とテキストを並べて配置したいとします。

画像とテキストを並べて配置したい

このような配置を実現するためには、Flexboxが簡単です。
まずは、親要素にdisplay: flex;を定義します。
参考: CSS Flexbox の基礎知識と使い方を詳しく解説

このスタイルシートで、下記のように表示されます。

なんとなく形はできました。
画像の幅を設定していないので、画像とテキストがくっつくのは理にかなっています。理想としては、画像の幅を固定し、適度にマージンを加えて、残りいっぱいにテキストが配置されるようにしたいです。

スタイルシートに、画像の幅とマージンを加えます。

これで、理想に少し近づきました。

これは確かに、Chromeだと素晴らしく見えます。でも、ちょっと待ってください。Firefoxのデベロッパーツールで画像のタグを調べると、設定したwidth値ではありません。

Firefoxのデベロッパーツールで検証

min-widthを使用すると、画像を希望する50pxの幅にすることができます。

しかし、これは幅だけです。マージンには効果がありません。

とりあえず、Firefoxで改善されました。

さらに詳しく解説

画像のサイズが小さくならないようにするには、flex-shrinkプロパティを使うと便利です。

flex-shrinkのデフォルト値は、1です。画像の元のサイズを維持するために、0を定義します。
参考: flex-shrinkプロパティとは

「flex-shrink: 0;」を加えると、下記のようになります。

これでだいぶ、よくなりました！
しかし、まだ改善の余地があります。

最終的な答え

flex-shrinkはflexプロパティのショートハンドに含まれているので、簡単に記述することができます。flexプロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。
参考: flexプロパティとは

flex-shrinkを0に設定し、flex-basisをデフォルトの幅に設定すると、widthプロパティは必要ありません。

これで、完成です。コードも非常にシンプルです。

このテクニックを使った応用技

flex-shrinkプロパティは他にも多くの問題を解決します。特に、Flexboxを使い始めたばかりなら、覚えておいて損はありません。CSS-Tricksのニュースレターで取り上げた例を紹介しましょう。

ユーザーが複数のアイテムを左右にスクロールできるナビゲーションのコンポーネントがあります。

この長いナビゲーションは、アイテムを複数行にするべきではありません。なぜ複数行になってしまったのか。flex-shrinkプロパティを0に設定すると、各アイテムは縮小しないように指示され、代わりにコンテンツの幅が仮定されます。

flex-shrinkの代わりにflexプロパティを使用するため、コードを修正します。今回はコンテナのスペースを分割するときにすべてのアイテムの最大スペースを考慮する必要があるため、flex-basisはautoにします。
参考: flex-basisプロパティとは

追加したのはたった一行のスタイルシートですが、柔軟なレイアウトを作成するためには非常に重要です。