display:inline-flex;ID ラッパー内の要素を垂直方向に揃えようとしています。IDラッパーはフレックス コンテナーなので、この ID にプロパティを指定しました。
しかし、表示に違いはありません。ラッパー ID 内のすべてが表示されると予想していましたinline。なぜ表示されないのでしょうか?
#wrapper {
display: inline-flex;
/*no difference to display:flex; */
}<body>
<div id="wrapper">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>ベストアンサー1
display: inline-flexはフレックスアイテムをインラインで表示しません。フレックスコンテナdisplay: inline-flexをインラインで表示します。これがとの唯一の違いです。と、およびdisplay: flexの間でも同様の比較ができます。display: inline-blockdisplay: blockインライン対応がある他の表示タイプ. 1
フレックス アイテムへの影響にはまったく違いはありません。フレックス コンテナーがブロック レベルかインライン レベルかに関係なく、フレックス レイアウトは同じです。特に、フレックス アイテム自体は常にブロック レベル ボックスのように動作します (ただし、インライン ブロックのプロパティもいくつかあります)。フレックス アイテムをインラインで表示することはできません。そうしないと、実際にはフレックス レイアウトが存在しません。
「垂直に揃える」とは具体的に何を意味しているのか、また、なぜコンテンツをインラインで表示したいのかは明確ではありませんが、あなたが達成しようとしていることに対して、flexbox は適切なツールではないのではないかと思います。おそらく、あなたが探しているのは、昔ながらの単純なインライン レイアウト (display: inlineおよび/またはdisplay: inline-block) であり、flexbox はそれに代わるものではありません。flexbox は、誰もが主張するようなユニバーサル レイアウト ソリューションではありません(おそらく、この誤解が、そもそもあなたが flexbox を検討している理由であるため、私はこのように述べています)。
1 ブロック レイアウトとインライン レイアウトの違いはこの質問の範囲外ですが、最も目立つのは自動幅です。ブロック レベル ボックスは、包含ブロックを埋めるために水平方向に伸びますが、インライン レベル ボックスは、コンテンツに合わせて縮小します。実際、この理由だけで、フレックスdisplay: inline-flexコンテナーをインラインで表示する非常に正当な理由がない限り、自動幅を使用することはほとんどありません。