通常、要素を横並びにしたい時は一番最初に思い浮かぶのがdisplay: flex;です。実際によく使用します。あまり、馴染みがないですが、display: inline-flex;で横並びにする方法もあります。
display: flex;とdisplay: inline-flexは何が違うのでしょうか？
display: flex
・ブロックレベルコンテナ: display: flex を適用すると、その要素はブロックレベルコンテナになります。
・外側の影響: 他のブロック要素と同様に、その要素は親要素内で新しい行を開始し、横幅は通常親要素の幅いっぱいに広がります。
・内側の影響: 内部の子要素はFlexboxのレイアウトルールに従って配置されます。
display: inline-flex
・インラインレベルコンテナ: display: inline-flex を適用すると、その要素はインラインレベルコンテナになります。
・外側の影響: その要素は他のインライン要素と同様に扱われ、親要素内で新しい行を開始せずに、隣接するインライン要素と同じ行に配置されます。要素の幅は内容に応じて決定されます。
・内側の影響: 内部の子要素はFlexboxのレイアウトルールに従って配置されます。
具体的には下記のようなコードがあった場合、display: flex;の場合は
<style> .flex-container {
display: flex;
background-color: lightgray;
}
.flex-item {
background-color: tomato; padding: 10px; margin: 5px;
}
</style>
<div class=”flex-container”>
<div class=”flex-item”>Item 1</div>
<div class=”flex-item”>Item 2</div>
<div class=”flex-item”>Item 3</div>
</div>
表示は下記のようになります。
対して、赤字部分をdisplay: inline-flexに変更した場合、下記の表示になります。
上記のような違いがあります。
ここで復習として、ブロックレベルとインラインレベルの違いも挙げておきます。
ブロックレベル要素
- 新しい行を開始: ブロックレベル要素は常に新しい行を開始します。つまり、前後の要素と同じ行に配置されることはありません。
- 全幅を占有: デフォルトで親要素の幅全体を占有します。
- サイズ調整可能: 幅や高さを指定することができます。
- 子要素を含む: 他のブロックレベル要素やインライン要素を含むことができます。
- 代表的な要素:
<div>,<p>,<h1>〜<h6>,<ul>,<ol>,<li>,<blockquote>,<section>,<article>,<header>,<footer>など。
インラインレベル要素
- 同じ行に配置: インラインレベル要素は同じ行に他のインライン要素と並んで配置されます。新しい行を開始することはありません。
- 内容の幅に応じる: 幅は内容に応じて決まります。デフォルトでは親要素の幅全体を占有しません。
- サイズ指定不可: 高さや幅を直接指定することはできません（指定しても効果がありません）。
- 他の要素を含まない: 他のブロックレベル要素を含むことはできず、通常インライン要素やテキストのみを含みます。
- 代表的な要素:
<span>,<a>,<img>,<strong>,<em>,<label>,<br>,<i>,<b>など。
最後に、上記を踏まえて、display:flex;とdisplay: inline-flex;の使い分けですが、基本的にはケースバイケースですが、一般的に下記のような使い分けが考えられます。
display: flex:
- ページ全体や大きなセクションのレイアウト
- グリッドレイアウト
- 要素のセンタリング
display: inline-flex:
- ボタン内のアイコンとテキストの整列
- ナビゲーションメニューのアイテム
- 小さなコンテンツの中で子要素の整列
以上、display: flex;とdisplay: inline-flexの違いでした。