【CSS】display: inline-flex;って何なの？🤔
display: inline-flex;って何なの？🤔
`display: inline-flex;`はCSSプロパティの一つで、HTML要素の表示方法を指定するために使われます。`display`プロパティは、要素がどのように表示されるか、また、要素内のアイテムがどのように配置されるかを決定する役割があります。
`inline`: 要素がインライン（横並び）に表示されることを指定します。インライン要素は、通常、テキストの一部として扱われ、新しい行で始まらず、必要な幅だけを占めます。
`flex`: フレックスボックス（Flexible Box）レイアウトを適用します。これは、コンテナ内のアイテム間のスペース配分や、アイテムの整列を柔軟に制御するためのモダンなレイアウトモデルです。`flex`を使用することで、縦または横にアイテムを整列させたり、余白の分配を調整したりすることが容易になります。
`inline-flex`を使用すると、その要素はインライン要素のように振る舞い（ページの流れの中でテキストと同じように横に並びます）、しかし、その内部ではフレックスボックスレイアウトが適用されます。これにより、要素内のアイテム（子要素）をフレックスボックスの機能を使って整列や配分を行うことができますが、要素自体は周囲のインラインコンテンツと同じ流れで表示されます。
例えば、複数のボタンを一つの行に横並びで表示したいが、それらの間隔や整列を柔軟に調整したい場合に`display: inline-flex;`が役立ちます。このプロパティを使うことで、ボタンを含むコンテナは他のテキストやインライン要素と同じように扱われますが、ボタン自体は内部でフレックスボックスの利点を活かして配置されます。
display: flexでも横並びになるんじゃないの？ inline-flexとどう違うの？🤔
はい、`display: flex;`も要素を横並びにすることができますが、`display: inline-flex;`とは動作が異なります。これらの違いは、主に要素がページ内でどのように配置されるかに関係しています。
`display: flex;`
ブロックレベルのコンテナを作成します。つまり、`flex`を使うと、その要素はブロック要素のように振る舞います。
ブロック要素は常に新しい行で始まり、可能な限りの幅（親要素の幅いっぱい）を占めます。
`flex`を適用した要素の内部では、子要素（フレックスアイテム）を横並びに配置したり、スペースを配分したり、整列させたりすることができます。
主に、ページの大枠のレイアウトや、縦並びのアイテムを横並びに変更したい場合に適しています。
`display: inline-flex;`
インラインレベルのフレックスコンテナを作成します。これは、`inline-flex`を使うと、その要素がインライン要素のように振る舞うことを意味します。
インライン要素はテキストと同様に扱われ、新しい行で始まらず、他のインライン要素やテキストと同じ行に配置されます。しかし、内部ではフレックスボックスの特性を持ち、子要素を柔軟に配置できます。
この性質は、テキストや他のインライン要素の流れの中で小さなレイアウト（例えば、ボタン群やアイコンなど）を作成したい場合に便利です。
例での違い
`display: flex;`を適用した要素は、他のブロック要素のように動作し、親要素の幅全体を使用して新しい行で表示されます。
`display: inline-flex;`を適用した要素は、インライン要素のように他のテキストやインライン要素と同じ行に表示され、必要な幅だけを使用しますが、内部のアイテムはフレックスの特性に従って配置されます。
要するに、`flex`と`inline-flex`の主な違いは、要素がページ内でどのように表示されるか（ブロックレベルかインラインレベルか）にあり、内部のアイテムの配置に関するフレックスボックスの特性は両者で共通しています。
じゃあ、display: ineline-flexで、flex-directionをrowにしようがcolumnにしようが幅を狭めたら、縦に並ぶから、そこまで違いがなくない？ いや、最初に横並びになるか縦に並ぶかの違いがあるのか？？🤔
`display: inline-flex;`で`flex-direction`プロパティを`row`に設定しても`column`に設定しても、基本的にはコンテナ内のアイテムの配置方向を制御しますが、この設定が要素の外側の振る舞いにどのように影響するかは少し異なります。
`flex-direction: row;`
デフォルトの設定です。これはフレックスアイテムが水平方向（横）に配置されることを意味します。
`display: inline-flex;`でこの設定を使用すると、コンテナ内のアイテムは初めに横並びに配置されます。ただし、コンテナ自体はインライン要素のように振る舞い、必要な幅だけを占めます。
`flex-direction: column;`
この設定では、フレックスアイテムが垂直方向（縦）に配置されます。
`display: inline-flex;`でも、コンテナ内のアイテムは縦並びに配置されますが、コンテナ自体は依然としてインライン要素のように扱われ、他のインライン要素と同じ行に配置されることができます。
幅を狭めた場合
`flex-direction`が`row`でも`column`でも、コンテナの幅を狭めるとアイテムの配置が変わる可能性があります。特に`row`の場合、コンテナの幅がアイテムを横に並べるのに十分でなくなった時、どのように振る舞うかはフレックスアイテムに適用されたその他のスタイル（例えば、`flex-wrap`）に依存します。
`flex-wrap: wrap;`が設定されている場合、アイテムは次の行に折り返され、結果的に縦に並ぶことになるかもしれません。しかし、これは`flex-direction: row;`の初期配置とは異なります。
結論
`display: inline-flex;`を使用した場合、`flex-direction`が`row`か`column`かによって、コンテナ内のアイテムが最初に横並びになるか縦並びになるかが決まります。これは、特に初期状態でのビジュアルレイアウトにおいて重要な違いです。
幅を狭めた結果、アイテムが縦に並ぶかどうかは、`flex-wrap`の設定やコンテナの幅に依存しますが、これは`flex-direction`がアイテムの初期配置方向をどう定義しているかとは別の問題です。
つまり、`flex-direction`の設定は、コンテナ内のアイテムの初期配置（横並びか縦並びか）に影響を与え、これは特にレイアウトの設計初期段階で考慮すべき点です。
（ふーむ。flexはブロック要素で、inline-flexはインライン要素で配置が違うというのは分かった。俺ん中での問題は、flex-directionは最初の配置なんすよねえ。そこが確認できなかったんすよねえ。flex-direction: columnにしなくても横並びになったけど、それはflex-inlineだからなのか。だとしたら、逆にどうやったら、初期配置でflex-inlineで縦に並んでくれるんだろう。というそこが分かんない。🫠）
という今回の感想の答えも、載せておきますねッ！😁
`display: inline-flex;`で初期配置を縦並びにすることは、直感に反するように感じるかもしれませんが、実は可能です。`flex-direction`プロパティを`column`に設定することで、`display: inline-flex;`を使用していても、コンテナ内のアイテムを縦に並べることができます。
ここでの混乱の一因は、`display: inline-flex;`がインライン要素の性質を持つため、周囲のコンテンツと同じ行に表示されるという点にあります。しかし、この設定はコンテナ内のアイテムの配置には直接影響しません。コンテナ自体がインライン要素のように振る舞いますが、`flex-direction`を`column`に設定することで、その内部でのアイテムの配置を縦に指示できるのです。
実装方法
CSSで次のように指定します:
.container {
display: inline-flex;
flex-direction: column; /* コンテナ内のアイテムを縦に配置 */
}この設定により、`.container`クラスが適用された要素内のアイテムは縦に並びますが、コンテナ自体は他のインライン要素と同じように、文書の流れの中で横に配置されます。
注意点
`display: inline-flex;`と`flex-direction: column;`の組み合わせでは、コンテナの幅がその内部の最も幅の広いアイテムに基づいて決まります。コンテナの高さは内部のアイテムの合計高さに基づいて決まります。
この設定を使用すると、コンテナは依然としてインライン要素のように振る舞い、その高さは周囲のコンテンツとの間で適切に整列しないことがあります。これは、インライン要素が基本的にテキストの一部として扱われるためです。
この方法で、`display: inline-flex;`を使用しながらも、初期配置でアイテムを縦に並べることができます。
（なるほど！！ inline-flexが適用された要素の中が、flex-direction: columnなら縦並びに、flex-direction: rowもしくはflex-directionの設定を書かなかったら、横並びになるってことなんすね！！ 完全にいま、理解した！！ 気になってるっす！！😄）
俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！ ご興味あれば、よろしくお願いいたしますッ！！
それでは、最後まで読んでいただき、ありがとうございましたッ！！
よろしくお願いしますッ！