web-dev-qa-db-ja.com

Display：inline-flexとdisplay：flexの違いは何ですか？

IDラッパー内で要素を垂直方向に整列させようとしています。 IDラッパーはflexコンテナなので、このIDにプロパティdisplay:inline-flex;を付けました。

しかし、プレゼンテーションに違いはありません。ラッパー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>

JSFiddleの例

csscss3flexbox
257
astridx

display: inline-flexは flex items をインライン表示にしません。 flexコンテナ displayをインラインにします。それがdisplay: inline-flexとdisplay: flexの唯一の違いです。同様の比較がdisplay: inline-blockとdisplay: block、および インライン対応物を持つほとんどすべての他の表示タイプの間で行うことができます 。1

フレックスアイテムへの効果に全く違いはありません。フレックスコンテナがブロックレベルでもインラインレベルでも、フレックスレイアウトは同じです。特に、フレックスアイテム自体は常にブロックレベルのボックスのように振る舞います（ただし、それらはインラインブロックの some プロパティを持ちます）。フレックスアイテムをインラインで表示することはできません。そうでなければ、あなたは実際にはフレックスレイアウトを持っていません。

「縦に並べる」とはどういう意味なのか、またはなぜコンテンツをインラインで表示したいのかは明確ではありませんが、flexboxは、達成しようとしているものすべてに適したツールではないと思います。たぶんあなたが探しているものは単なる古いインラインレイアウト（display: inlineそして/またはdisplay: inline-block）であり、そのためにflexboxは ではなく に置き換えられます。 flexboxは not 誰もが主張しているユニバーサルレイアウトソリューションです（誤解が原因で最初にflexboxを検討しているのではないかと思われます）。

1ブロックレイアウトとインラインレイアウトの違いはこの質問の範囲外ですが、最も際立っているのは自動幅です。ブロックレベルのボックスは包含ブロックに合わせて水平方向に引き伸ばされますが、インラインレベルのボックスは内容に合わせて縮小されます。 。実際のところ、この理由だけで、あなたのflexコンテナをインラインで表示するのに非常に良い理由がない限り、display: inline-flexを使うことはほとんどありません。

320
BoltClock

flexとinline-flexはどちらもコンテナの子にフレックスレイアウトを適用します。 display:flexを持つコンテナは、それ自体がブロックレベル要素のように振る舞いますが、display:inline-flexはコンテナをインライン要素のように振る舞います。

49
Leo

最初は少しわかりにくいかもしれませんが、displayは親要素について話しているので、display: flex;と言います、display:inline-flex;と言うと、要素自体もinline...になります。

div inline または block を作るのと同じように、以下のスニペットを実行すると、display flexが次の行に分割される様子がわかります。

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}
<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>

一目で違いを示すために下の画像も素早く作成してください。

display flex vs display inline-flex

29
Alireza

"flex"と "inline-flex"の違い

短い答え：

1つはインラインで、もう1つは基本的にブロック要素のように応答します（ただし、いくつかは独自の違いがあります）。

長い答え：

インライン - フレックス - インラインバージョンのフレックスは、要素とその子要素が、ドキュメント/ Webページの通常の流れを維持しながら、フレックスプロパティを持つことを可能にします。基本的には、幅が十分に小さければ、2つのインラインフレックスコンテナを同じ行に配置できます。余分なスタイルを設定しなくても同じ行に配置できます。これは「インラインブロック」とよく似ています。

Flex - コンテナとその子にはflexプロパティがありますが、ドキュメントの通常のフローから取り出されるため、コンテナはその行を予約します。ドキュメントフローの観点からは、ブロック要素のように応答します。過剰なスタイルを設定しないと、2つのフレックスボックスコンテナを同じ行に配置することはできません。

あなたが抱えている可能性のある問題

あなたがあなたの例にリストした要素のために、私は推測していますが、私はあなたが均等に列ごとにリストされた要素を表示するためにflexを使いたいと思います.

おそらく問題があるのは、flexとinline-flexのデフォルトの "flex-direction"プロパティが "row"に設定されているためです。これにより、子が並べて表示されます。このプロパティを "column"に変更すると、要素は積み重ねられ、その親の幅と同じスペース（幅）を確保できます。

以下はflexとinline-flexがどのように機能するかを示す例と、インラインとブロック要素がどのように機能するかの簡単なデモです。

display: inline-flex; flex-direction: row;

Fiddle

display: flex; flex-direction: row;

Fiddle

display: inline-flex; flex-direction: column;

Fiddle

display: flex; flex-direction: column;

Fiddle

display: inline;

Fiddle

display: block

Fiddle

また、すばらしい参考資料： Flexboxの完全なガイド - CSSトリック

25
Aaron Loften

表示：flex flexアイテムまたはコンテナの子にのみflexレイアウトを適用します。そのため、コンテナー自体はブロック・レベルの要素のままであり、したがって画面の幅全体を占めます。

これにより、すべてのフレックスコンテナが画面上の新しい行に移動します。

Display：inline-flex コンテナ自体だけでなく、フレックスアイテムや子にもフレックスレイアウトを適用します。その結果、コンテナは、子と同じようにインラインフレックス要素として動作し、そのため、画面の全幅ではなく、その項目/子だけで必要な幅を占めます。

これにより、2つ以上のフレックスコンテナが次々にインラインフレックスとして表示され、画面の幅全体が表示されるまで画面上で並べて配置されます。

13
Noor Jahan Mukammel

ブラウザに必要な情報がわかるように、もう少し情報が必要です。たとえば、コンテナの子には「どのように」曲げるかを教える必要があります。

更新されたFiddle

CSSに#wrapper > * { flex: 1; margin: auto; }を追加し、inline-flexをflexに変更しました。これで、要素がページ上で均等に配置されていることがわかります。

1
FiSH GRAPHICS