Unterschied zwischen Display: Inline-Flex und Display: Flex

142

Ich habe Schwierigkeiten, die Eigenschaft display:inline-flex; zu verstehen. Was ist der Unterschied zwischen display:inline-flex; und display:flex;?Unterschied zwischen Display: Inline-Flex und Display: Flex

Ich versuche, einige Elemente innerhalb des ID-Wrappers vertikal auszurichten. Deshalb habe ich dieser ID die Eigenschaft display:inline-flex; gegeben; weil der ID-Wrapper der Flex-Container ist.

Aber es gibt keinen Unterschied in der Darstellung. Ich erwartete, dass alles in der Wrapper-ID inline angezeigt würde.

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

Was ist der Unterschied?

Quelle

2014-12-11 astridx

OP, wie Sie auf eine der bereitgestellten Antwort markieren * akzeptiert * durch das Häkchen auf der klicken linke Seite der Antwort. – domsson

181

display: inline-flex macht nicht flex items inline anzeigen. Es macht den Flex Container inline anzuzeigen. Das ist der einzige Unterschied zwischen display: inline-flex und display: flex. Ein ähnlicher Vergleich kann zwischen display: inline-block und display: block und pretty much any other display type that has an inline counterpart gemacht werden.

Es gibt absolut keinen Unterschied in der Wirkung auf Flex-Elemente; Das Flex-Layout ist identisch, unabhängig davon, ob der Flex-Container auf Block- oder Inline-Ebene ist. Insbesondere verhalten sich die Flex-Elemente selbst immer wie Blöcke auf Blockebene (obwohl sie einige Eigenschaften von Inline-Blöcken haben). Sie können Flex-Elemente nicht inline anzeigen. Ansonsten haben Sie eigentlich kein Flex-Layout.

Es ist nicht klar, was genau Sie mit "vertikal ausrichten" oder warum genau wollen Sie den Inhalt inline anzeigen, aber ich vermute, dass Flexbox ist nicht das richtige Werkzeug für was auch immer Sie versuchen, zu erreichen. Die Chancen sind, was Sie suchen, ist einfach nur alte Inline-Layout (display: inline und/oder display: inline-block), für die flexbox ist nicht ein Ersatz; Flexbox ist nicht die universelle Layout-Lösung, die jeder behauptet, es ist (ich sage dies, weil das Missverständnis ist wahrscheinlich, warum Sie Flexbox in erster Linie in Betracht ziehen). Die Unterschiede zwischen Blocklayout und Inline-Layout liegen außerhalb des Bereichs dieser Frage, aber die am meisten hervortretende ist die automatische Breite: Blöcke auf Blockebene werden horizontal gestreckt, um den enthaltenen Block zu füllen, wohingegen Inline-Ebenen-Boxen schrumpfen um ihren Inhalt anzupassen. Tatsächlich werden Sie aus diesem Grund fast nie display: inline-flex verwenden, es sei denn, Sie haben einen sehr guten Grund, Ihren Flex-Container inline anzuzeigen.

Quelle

2014-12-13 13:08:19 BoltClock

Enhanced Geige Demo zu unterscheiden "Inline-Flex" und "Flex": http://jsfiddle.net/mgr0en3q/1/ Original Geige von @ Fisch-Grafiken und @astridx –

Sie benötigen ein wenig mehr Informationen, damit der Browser weiß, was Sie wollen. Zum Beispiel müssen den Kindern des Containers gesagt werden, "wie" sie sich bewegen sollen.

Updated Fiddle

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

Quelle

2014-12-11 18:22:03

Vielen Dank für Ihre Antwort, aber ich wusste, dass ich es so machen könnte. Ich habe das Property-Display nur missverstanden: inline-flex; - Ich dachte, dass diese Eigenschaft ein einfacherer Weg ist, um mein Ziel zu erreichen. Aber zwischen den letzten Tagen habe ich gelernt, dass diese Eigenschaft den Container nur inline anzeigt. Mit einem zusätzlichen Hintergrund sehe ich jetzt den Unterschied zwischen den Eigenschaften anzeigen: inline-flex; und Anzeige: flex; in einer Flexbox. http://jsfiddle.net/vUSmV/101 – astridx

flex und inline-flex beide Flex-Layout auf Kinder des Containers anwenden.Container mit display:flex verhält sich selbst wie ein Block-Level-Element, während display:inline-flex den Container wie ein Inline-Element verhält.

Quelle

2014-12-13 13:17:31 Leo

Der Unterschied zwischen "flex" und "inline-flex"

Kurze Antwort:

One ist inline und der andere antwortet im Grunde wie ein Block-Element (aber einige seiner eigenen hat Unterschiede).

Lange Antwort:

Inline-Flex - Die Inline-Version von Flex ermöglicht es das Element, und es ist Kinder, flex Eigenschaften zu haben, während noch in dem regelmäßigen Fluss der Dokument/Webseite zu bleiben. Grundsätzlich können Sie zwei Inline-Flex-Container in derselben Zeile platzieren, wenn die Breite klein genug ist, ohne dass Sie übermäßiges Styling benötigen, damit sie in derselben Zeile vorhanden sind. Dies ist ziemlich ähnlich zu "Inline-Block".

Flex - Der Container und seine untergeordneten Elemente haben Flexeigenschaften, aber der Container reserviert die Zeile, da sie aus dem normalen Dokumentfluss entnommen wird. Es reagiert wie ein Blockelement auf den Dokumentenfluss. Zwei Flexbox-Container können nicht in der gleichen Reihe ohne übermäßiges Styling existieren.

Das Problem, das Sie mit sein kann

Aufgrund der Elemente, die Sie in Ihrem Beispiel aufgeführt, obwohl ich vermute, ich glaube, Sie wollen flex verwenden, um die Elemente in einer geraden Reihe-für- aufgelistet angezeigt werden Reihe Mode aber weiterhin die Elemente nebeneinander zu sehen.

Der Grund, warum Sie wahrscheinlich Probleme haben, liegt daran, dass flex und inline-flex die Standardeinstellung "flex-direction" -Eigenschaft auf "row" gesetzt haben. Dies zeigt die Kinder Seite an Seite. Wenn Sie diese Eigenschaft in "column" ändern, können Ihre Elemente so gestapelt und reserviert werden, dass der Abstand (Breite) der Breite des übergeordneten Elements entspricht.

Im Folgenden finden Sie einige Beispiele, die zeigen, wie flex vs inline-flex funktioniert und auch eine kurze Demonstration der Funktionsweise von Inline- und Blockelementen ...

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

Auch eine gute Referenz doc: A Complete Guide to Flexbox - css tricks

Quelle

2016-12-10 09:08:13

Display: flex flex Layout an die Flex-Elemente oder Kinder des Behälters anwenden nur. Der Container selbst bleibt also ein Block-Level-Element und nimmt somit die gesamte Breite des Bildschirms ein.

Dies bewirkt, dass jeder Flex Behälter in eine neue Zeile auf dem Bildschirm zu bewegen.

Anzeige: inline-flex Wenden Sie Flex-Layout auf die Flex-Elemente oder Kinder sowie auf den Container selbst an. Dadurch verhält sich der Container wie die Kinder wie ein Inline-Flex-Element und nimmt damit nur die Breite seiner Items/Childs und nicht die gesamte Breite des Bildschirms ein.

Dies bewirkt, dass zwei oder mehr flexiblen Behälter nacheinander angezeigt, wie Inline-Flex ist, schließen sich die nebeneinander auf dem Bildschirm, bis die gesamte Breite des Schirms genommen wird.

Quelle

2017-01-09 16:40:50

"flex Layout [...] auf den Container selbst anwenden" [Zitat benötigt] – BoltClock

@NoorJahanMukammel: Gute Antwort. –

Vielleicht sollte ich es nur zum Vorteil anderer Leser buchstabieren: display: inline-flex ** nicht ** Flex-Layout auf den Container selbst anwenden. Der Grund, warum Inline-Flex-Container nacheinander auftauchen, ist der Name "inline-flex" (denken die Leute, der Name sei irreführend oder so?). Ich verstehe nicht, warum Leute diese Antwort aufheben und sie eine "gute Antwort" nennen, wenn meine Antwort von mehr als 2 Jahren direkt direkt widerspricht, was sie sagt, und der Antworter hat sich nicht die Mühe gemacht, ein Zitat zu geben, wenn er danach gefragt wird weil sie * nicht können *, weil die Information falsch ist). – BoltClock

OK, weiß ich zunächst ein wenig verwirrend sein könnte, aber display spricht über das übergeordnete Element, so bedeutet, wenn wir sagen: display: flex;, es geht um das Element, und wenn wir display:inline-flex; sagen, macht auch das Element selbst inline ...

Es ist wie machen eine divInline oder Block, führen Sie das snippet unten, und Sie können sehen, wie display flex bricht zur nächsten Zeile:

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

auch das Bild unten schnell erstellen, den Unterschied auf einen Blick zeigen:

Quelle

2017-10-21 15:01:47 Alireza

Unterschied zwischen Display: Inline-Flex und Display: Flex

Antwort

Verwandte Themen