解 説

紆余曲折の上、華々しくデビューしたdisplay:flexは脚光をあびている。ところが、inline-flexときたらほとんど語られることがない。
なんということだろうか。これではinline-flexの立場がない。
DogRoboはこんな脚光をあびないものが大好物なのだ。
どれどれ、スポットライトを照らして確認してみることにしようか。
inline-flex

display:inline-flexについて

「inline-flex」はインラインレベルの flexコンテナボックスを生成するとCSS Flexible Box Layout Module Level 1に記述されています。「インラインレベルのflexコンテナ」って何?と思ってしまいます。ここではinline-flexについて掘り下げてみます。

display:flexとdisplay:inline-flexの違い

inline-flexを使ったリストのサンプル
inline1

flexを使ったリストのサンプル
inline2

flexを使ったリストのCSSコード

inline-flexを使ったリストのCSSコード

HTMLタグはどちらも同じです。基本的にはCSSのdisplayの値をflexにしたかinline-flexにしたかの違いです。

各li要素はflexアイテムになります。確認のためにorderプロパティで並び順を変更しています。
displayの値がflexであろうが、inline-flexであろうが、どちらも番号が大きいものほど右に並びます。
つまり、flexBoxとしての機能を持ち合わせていることがわかります。

2つのサンプルで大きな違いはflexの方はflexコンテナを形成してコンテナの幅はブラウザいっぱいに広がって縦に並びますが、inline-flexの場合は中身に依存した幅をとって横並びになっています。つまりinline-flexの場合はinlineの性格をもっていることが現れています。

また、inline-flexの場合「width」や「height」そして「padding」と「margin」の値がブロック要素と同じように適用されていることから、通常のinlineの性格ではなく、inline-blockに似た性格を有しています。

つまり、inline-flexの性格はinlin-blockをさらにflexBoxに拡張したと考えられます。
ということは、これまでinline-block を使用していた場面でinline-flexを使用するとさらに便利に使えることが予想されます。

inline-flexを便利に使う方法

li要素を横並びにしてシンプルなナビゲーションを作成します。ナビボタンの幅は文字の長さに依存し、ナビゲーション全体はページの中央に揃えるようにします。
このナビゲーションをdisplay:flexとdisplay:inline-flexの2つの方法で作成してみます。

nav1

シンプルなナビゲーションのHTMLコード

display:inline-flexを使用したCSSコード

display:flexを使用したCSSコード

このように、シンプルなナビゲーションを作成する場合inline-flexは非常に便利に使えます。

一方、display:flexでは幅がブラウザいっぱいに広がりますので、一定の幅を算出する方法が複雑になります。そのためflexコンテナを中央揃えする時に面倒なテクニックが必用になります。
上のサンプルではflexアイテムの幅がテキストの量に依存するためflexコンテナの幅を正確に計算できません。そのため、フロートやポジションを駆使したテクニックで強引に中央揃えを行っています。

尚、flexアイテムにあたる 「.g-nav li」に対しても「display:flex」を指定しているのは、ボタンの中のテキストを垂直方向の中央揃えにするために使用しています。もちろんここで「display:inline-flex」を使用しても同じ結果になります。
もう少し詳しく説明すると、ulに対して「justify-content: center」を設定した場合、li要素全体の垂直方向の中央揃えを行いますが、今回はli要素全体ではなく、liの中のテキストだけを垂直方向の中央揃えにしたいので、 「.g-nav li」に対して「display:flex」を指定したわけです。ここはわかりにくいので一度サンプルで試してみることをお勧めします。

FlexBoxの仕組みは入れ子状態にすることもできる

inline-flexが便利な点

  1. flexアイテムの幅に依存するなどflexコンテナの幅を決めることが難しい場合に自動でflexコンテナの幅が決まる
  2. 1のことよりmargin:autoでflexコンテナを中央揃えしやすい
display:inline-flex はflexコンテナの幅をflexアイテムの幅に依存したいときに使うと便利

そもそもdisplayプロパティはHTMLタグの意味づけを生かしながらも、その挙動だけはCSSで変更することができる便利なプロパティです。
例えば、pタグは段落を表す意味あいがありますが、その意味あいを残しつつもCSSのdisplayプロパティでブロックの性格をインラインにしてみたり、リストにしたり、テーブルのセルにすることもできます。そして今脚光を浴びているフレックスボックスの性格を与えることもできるわけです。そしてinline-flexもdisplayプロパティの値としてFlexible Box Layout Moduleで定義されたものです。

inline-flexは「インラインレベルのflexコンテナ」ですから基本的にはインライン要素に使用するもので。spanタグやaタグに対して使用するものでしょう。けれどもここでちょっとした疑問が出てきます。
インラインであろうが、何であろうが、flexコンテナを作成するものなら何らかのコンテナ的な役割をする要素に設定するものでしょう。けれどもインライン要素は(HTML5ではその概念がなくなりました)どちらかというとflexアイテム的な要素ですから、更にflexコンテナ化、しかもinline-flexとしてコンテナ化する用途は少ないかもしれません。

けれども、displayプロパティが多様される昨今ではブロック要素とかインライン要素の概念にとらわれずに便利な性格なら、用途に応じて積極的に取り入れるべきものです。
inline-flexを上手に活用しましょう。

Flex Boxレイアウト関連記事