FlexBoxの使い方（４）〜display:inline-flexについて（動画あり）

inline_flexの動画
「display:inline-flex」について
1. 「display:flex」と「display:inline-flex」の違い
「inline-flex」を便利に使う方法
1. inline-flexが便利な点
Web動画記事一覧

inline_flexの動画

「inline-flex」を簡単に説明すると「inline-block」の拡張版と言えます。
「inline-block」の性格を持ちながら、尚且つ「flex」の性格を持ちます。結構万能に使えますので有効に活用しましょう。

メリット

flexコンテナに「display:inline-flex」を設定するとflexアイテムに幅を指定しなくても勝手に中身依存の幅になること。
flexコンテナの親要素に「text-align:center」をかけると中央に揃います。
FlexBoxの様々なプロパティがそのまま使えます。

デメリット
中央揃えに「margin:auto」が使えないこと。親要素に「text-align:center」を設定すると別の要素に影響が出る可能性があること。
対策としては親要素にdisplay:flexを設定して、justify-content:centerにすればこの問題は解決できます。

「display:inline-flex」について

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

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

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

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

<div class="wrap">
<ul>
 <li>AAAA</li>
 <li>BBBB</li>
 <li>CCCC</li>
</ul>
<ul>
 <li>DDDD</li>
 <li>EEEE</li>
 <li>FFFF</li>
</ul>
</div>

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

ul{
  display:flex;
  justify-content: space-between;
  list-style-type: none;
  padding:0;
  background-color: lightblue;
}
li{
  background-color: pink;
  width:100px;
  height:50px;
  padding:10px;
}
li:first-child{
  order:2;
}
li:nth-child(2){
  order:3;
}
li:last-child{
  order:1;
}

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

.wrap{
  text-align: center;
}
ul{
  display:inline-flex;
  justify-content: space-between;
  list-style-type: none;
  padding:0;
  background-color: lightblue;
}
li{
  background-color: pink;
  width:100px;
  height:50px;
  margin:10px;
}
li:first-child{
  order:2;
}
li:nth-child(2){
  order:3;
}
li:last-child{
  order:1;
}

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

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

２つのサンプルで大きな違いは「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」の２つの方法で作成してみます。

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

<nav class="g-nav">
  <ul>
    <li>AAAAAAAA</li>
    <li>BBBB</li>
    <li>CCCCCC</li>
    <li>DDDDDDDDDD</li>
    <li>EEE</li>
    <li>FFFFFFF</li>
  </ul>
</nav>

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

.g-nav{
  text-align: center;
}
.g-nav ul{
  display:inline-flex;
  list-style-type: none;
  padding:0;
  background-color: lightblue;
}
.g-nav li{
  background-color: pink;
  display:flex;
  width:auto;
  margin:10px;
  padding:10px;
  align-items:center;
  justify-content: center;
}

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

.g-nav{
  text-align: center;
}
.g-nav ul{
  display:flex;
  list-style-type: none;
  padding:0;
  float: left;
  position: relative;
  left: 50%;
}
.g-nav li{
  background-color: pink;
  display:flex;
  width:auto;
  margin:10px;
  padding:10px;
  align-items:center;
  justify-content: center;
  float: left;
  position: relative;
  left: -50%;
}

このように、シンプルなナビゲーションを作成する場合「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が便利な点

flexコンテナに「display:inline-flex」を設定するとflexアイテムに幅を指定しなくても勝手に中身依存の幅になること。
flexコンテナの親要素に「text-align:center」をかけると中央に揃います。
FlexBoxの様々なプロパティがそのまま使えます。

「display:inline-flex」はflexコンテナの幅をflexアイテムの幅に依存したいときに使うと便利

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

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

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

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