Was ist der Unterschied zwischen Display: Inline-Flex und Display: Flex?

330

Ich versuche, Elemente innerhalb eines ID-Wrappers vertikal auszurichten. Ich habe display:inline-flex;dieser ID die Eigenschaft gegeben , da der ID-Wrapper der Flex-Container ist.

Es gibt jedoch keinen Unterschied in der Darstellung. Ich habe erwartet, dass alles in der Wrapper-ID angezeigt wird inline. Warum ist es nicht?

#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>

Erweitern Sie das Snippet

css flexbox Astridx
quelle

407

display: inline-flexmacht nicht flex Produkte inline angezeigt werden soll . Dadurch wird die Anzeige des Flex-Containers inline angezeigt. Das ist der einzige Unterschied zwischen display: inline-flexund display: flex. Ein ähnlicher Vergleich kann zwischen display: inline-blockund display: blockund so ziemlich jedem anderen Anzeigetyp mit einem Inline-Gegenstück durchgeführt werden . ¹

Es gibt absolut keinen Unterschied in der Wirkung auf flexible Gegenstände; Das Flex-Layout ist identisch, unabhängig davon, ob der Flex-Container auf Block- oder Inline-Ebene ausgeführt wird. Insbesondere verhalten sich die Flex-Elemente selbst immer wie Boxen auf Blockebene (obwohl sie einige Eigenschaften von Inline-Blöcken aufweisen). Sie können Flex-Elemente nicht inline anzeigen. Andernfalls haben Sie kein flexibles Layout.

Es ist nicht klar, was genau Sie unter "vertikal ausrichten" verstehen oder warum genau Sie den Inhalt inline anzeigen möchten, aber ich vermute, dass Flexbox nicht das richtige Werkzeug für alles ist, was Sie erreichen möchten. Möglicherweise suchen Sie nur nach einem alten Inline-Layout ( display: inlineund / oder display: inline-block), für das die Flexbox kein Ersatz ist. Flexbox ist nicht die universelle Layoutlösung , von der jeder behauptet, dass sie es ist (ich sage dies, weil das Missverständnis wahrscheinlich der Grund ist, warum Sie Flexbox überhaupt in Betracht ziehen).

¹ _{Die Unterschiede zwischen Blocklayout und Inline-Layout liegen außerhalb des Rahmens dieser Frage. Am auffälligsten ist jedoch die automatische Breite: Felder auf Blockebene werden horizontal gestreckt, um den enthaltenen Block zu füllen, während Felder auf Inline-Ebene verkleinert werden, um sie anzupassen Inhalt. Nur aus diesem Grund werden Sie es fast nie verwenden, es display: inline-flexsei denn, Sie haben einen sehr guten Grund, Ihren Flex-Container inline anzuzeigen.}

BoltClock
quelle

14

Verbesserte Geigen-Demo zur Unterscheidung inline-flexund flex: jsfiddle.net/mgr0en3q/1 Original-Geige von @ fish-graphics und @astridx

Kevin Law

Absolut hilfreiche Antwort. Ich war beim ersten Mal verwirrt. Wenn ich den Inline-Flex anwende, ändert sich das Flex-Element nicht, wenn ich es auch mit Display-Flex anwende. Eigentlich gilt es bei Flex Container :)

Faris Rayhan

67

OK, ich weiß zunächst, dass es vielleicht etwas verwirrend ist, aber displayich spreche über das übergeordnete Element. Das heißt, wenn wir sagen : display: flex;, geht es um das Element und wenn wir sagen display:inline-flex;, macht es auch das Element selbst inline...

Es ist, als würde man eine div Inline oder einen Block erstellen, das folgende Snippet ausführen und sehen, wie display flexdie nächste Zeile abbricht:

.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>

Erweitern Sie das Snippet

Erstellen Sie auch schnell das folgende Bild, um den Unterschied auf einen Blick zu zeigen:

Alireza
quelle

3

Was benutzt du für dieses Bild? Diese Schriftart ist sehr schön.

Shu

5

Auf dem obigen Bild befindet sich ein kleiner Tippfehler. "Anzeige: Flex-Inline" sollte "Anzeige: Inline-Flex" sein, ähnlich wie "Inline-Block" usw.

AlienKevin

62

flexund inline-flexbeide wenden ein flexibles Layout auf untergeordnete Elemente des Containers an. Container mit display:flexverhält sich wie ein Element auf Blockebene, während sich display:inline-flexder Container wie ein Inline-Element verhält.

Löwe
quelle

29

Der Unterschied zwischen "Flex" und "Inline-Flex"

Kurze Antwort:

Einer ist inline und der andere reagiert im Grunde wie ein Blockelement (hat aber einige seiner eigenen Unterschiede).

Längere Antwort:

Inline-Flex - Die Inline-Version von Flex ermöglicht es dem Element und seinen untergeordneten Elementen, Flex-Eigenschaften zu haben, während es weiterhin im regulären Fluss des Dokuments / der Webseite verbleibt. Grundsätzlich können Sie zwei Inline-Flex-Container in derselben Reihe platzieren, wenn die Breiten klein genug sind, ohne dass ein übermäßiges Styling erforderlich ist, damit sie in derselben Reihe vorhanden sind. Dies ist ziemlich ähnlich zu "Inline-Block".

Flex - Der Container und seine untergeordneten Elemente haben Flex-Eigenschaften, aber der Container reserviert die Zeile, da sie aus dem normalen Fluss des Dokuments entfernt wird. Es reagiert in Bezug auf den Dokumentenfluss wie ein Blockelement. Zwei Flexbox-Container könnten ohne übermäßiges Styling nicht in derselben Reihe vorhanden sein.

Das Problem, das Sie möglicherweise haben

Aufgrund der Elemente, die Sie in Ihrem Beispiel aufgelistet haben, möchten Sie, obwohl ich vermute, Flex verwenden, um die aufgelisteten Elemente gleichmäßig zeilenweise anzuzeigen, aber die Elemente weiterhin nebeneinander anzeigen.

Der Grund, warum Sie wahrscheinlich Probleme haben, ist, dass für Flex und Inline-Flex die Standardeigenschaft "Flex-Richtung" auf "Zeile" festgelegt ist. Dadurch werden die Kinder nebeneinander angezeigt. Wenn Sie diese Eigenschaft in "Spalte" ändern, können Ihre Elemente Platz (Breite) stapeln und reservieren, der der Breite des übergeordneten Elements entspricht.

Im Folgenden finden Sie einige Beispiele, die zeigen, wie Flex vs Inline-Flex funktioniert, sowie eine kurze Demo, wie Inline vs Block-Elemente funktionieren ...

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

Geige

display: flex; flex-direction: row;

Geige

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

Geige

display: flex; flex-direction: column;

Geige

display: inline;

Geige

display: block

Geige

Außerdem ein großartiges Referenzdokument: Eine vollständige Anleitung zu Flexbox - CSS - Tricks

quelle

15

Anzeige: Flex Wendet das Flex-Layout nur auf die Flex-Elemente oder untergeordneten Elemente des Containers an. Der Container selbst bleibt also ein Element auf Blockebene und nimmt somit die gesamte Breite des Bildschirms ein.

Dadurch wird jeder Flex-Container in eine neue Zeile auf dem Bildschirm verschoben.

Anzeige: Inline-Flex wendet das Flex-Layout auf die Flex-Elemente oder untergeordneten Elemente sowie auf den Container selbst an. Infolgedessen verhält sich der Container wie die untergeordneten Elemente wie ein Inline-Flex-Element und nimmt somit die Breite ein, die nur für seine Elemente / untergeordneten Elemente erforderlich ist, und nicht die gesamte Breite des Bildschirms.

Dies führt dazu, dass zwei oder mehr Flex-Container nacheinander, die als Inline-Flex angezeigt werden, nebeneinander auf dem Bildschirm ausgerichtet werden, bis die gesamte Breite des Bildschirms erfasst ist.

Noor Jahan Mukammel
quelle

1

"Flex-Layout [...] auf den Container selbst anwenden" [Zitat erforderlich]

BoltClock

1

Sie benötigen etwas mehr Informationen, damit der Browser weiß, was Sie wollen. Zum Beispiel muss den Kindern des Containers gesagt werden, wie sie sich beugen sollen.

Geige aktualisiert

Ich habe hinzugefügt , #wrapper > * { flex: 1; margin: auto; }um Ihre CSS und geändert inline-flexzu flex, und Sie können sehen , wie die Elemente nun selbst Raum heraus gleichmäßig auf der Seite.

FiSH-GRAFIKEN
quelle

2

Vielen Dank für Ihre Antwort, aber ich wusste, dass ich es so machen kann. Ich habe die Eigenschaftsanzeige nur falsch verstanden: Inline-Flex; - Ich dachte, dass diese Eigenschaft ein einfacher Weg ist, um mein Ziel zu erreichen. Aber zwischen den letzten Tagen habe ich erfahren, dass diese Eigenschaft nur die Containeranzeige inline macht. Mit einem zusätzlichen Hintergrund sehe ich jetzt den Unterschied zwischen den Eigenschaften: Inline-Flex; und Anzeige: flex; an einer Flexbox. jsfiddle.net/vUSmV/101

astridx

-1

Zum besseren Verständnis auf der ganzen Seite öffnen

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}

<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>

Erweitern Sie das Snippet

Pawan Gangwani
quelle

Code pen ==> codepen.io/pgangwani/pen/yLyPZQg

Pawan Gangwani

Was ist der Unterschied zwischen Display: Inline-Flex und Display: Flex?

Antworten: