BinaryDevelop
  1. ホーム
  2. css

[解決済み] display:inline-flexとdisplay:flexの違いは何ですか？

2022-03-22 23:34:33

質問

IDラッパー内の要素を縦に整列させようとしています。プロパティに display:inline-flex; を、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>

解決方法は？

display: inline-flex を作成しません。 フレックスアイテム をインラインで表示します。それは フレックスコンテナ をインラインで表示します。との違いはそれだけです。 display: inline-flex と display: flex . 同様の比較は display: inline-block と display: block および インラインに対応する他の多くの表示タイプ . 1

フレックスコンテナがブロックレベルでもインラインレベルでも、フレックスレイアウトは全く同じです。特に、フレックスアイテム自体は常にブロックレベルのボックスのように動作します（ただし、フレックスアイテムには 一部 のプロパティは、インラインブロックのものです)。フレックスアイテムをインラインで表示することはできません。そうでなければ、実際にはフレックスレイアウトが存在しないことになります。

vertically align" が何を意味するのか、なぜコンテンツをインラインで表示したいのかが不明ですが、あなたが達成しようとしていることにフレックスボックスは適していないのではないでしょうか。あなたが求めているのは、単なる古いインライン レイアウトである可能性があります ( display: inline および display: inline-block ) の場合、フレックスボックスは ではない は代替品であり、フレックスボックスは ではない は、誰もが主張する普遍的なレイアウト ソリューションです（この誤解が、おそらくあなたが最初にフレックスボックスを検討した理由なので、私はこのことを述べています）。

1 <サブ ブロックレイアウトとインラインレイアウトの違いは、この質問の範囲外ですが、最も目立つのは自動幅です。ブロックレベルのボックスは、その含むブロックに合わせて水平に伸びるのに対し、インラインレベルのボックスはそのコンテンツに合わせて縮小されます。実際、この理由だけで、あなたはほとんど display: inline-flex フレックスコンテナをインラインで表示する特別な理由がない限りは。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します