Ich versuche, Elemente innerhalb eines ID-Wrapper vertikal auszurichten. Ich habe dem ID-Wrapper die Eigenschaft display:inline-flex; gegeben, da der ID-Wrapper der Flex-Container ist.
Aber es gibt keinen Unterschied in der Darstellung. Ich hätte erwartet, dass alles im Wrapper-ID inline angezeigt wird. Warum ist das nicht der Fall?
#wrapper {
display: inline-flex;
/*no difference to display:flex; */
}
header
nav
aside
main
footerdisplay: inline-flex macht Flex-Elemente nicht inline anzeigen. Es macht den Flex-Container inline anzeigen. Das ist der einzige Unterschied zwischen display: inline-flex und display: flex. Ein ähnlicher Vergleich kann zwischen display: inline-block und display: block sowie praktisch jedem anderen Anzeigetyp, der einen Inline-Partner hat gemacht werden.1
Es gibt absolut keinen Unterschied in der Wirkung auf Flex-Elemente; das Flex-Layout ist identisch, egal ob der Flex-Container Block-Level oder Inline-Level ist. Insbesondere verhalten sich die Flex-Elemente selbst immer wie Block-Level-Boxen (obwohl sie einige Eigenschaften von Inline-Blocks haben). Sie können Flex-Elemente nicht inline anzeigen; sonst haben Sie tatsächlich kein Flex-Layout.
Es ist nicht klar, was genau Sie mit "vertikal ausrichten" meinen oder warum Sie den Inhalt inline anzeigen möchten, aber ich vermute, dass Flexbox nicht das richtige Werkzeug für das ist, was Sie erreichen möchten. Wahrscheinlich suchen Sie einfach nach dem ganz normalen Inline-Layout (display: inline und/oder display: inline-block), für das Flexbox nicht geeignet ist; Flexbox ist nicht die universelle Layoutlösung, für die alle behaupten, dass sie es ist (ich sage das, weil das Missverständnis wahrscheinlich der Grund ist, warum Sie überhaupt Flexbox in Betracht ziehen).
1 Die Unterschiede zwischen Block-Layout und Inline-Layout fallen nicht in den Rahmen dieser Frage, aber derjenige, der am meisten auffällt, ist die automatische Breite: Block-Level-Boxen dehnen sich horizontal aus, um ihren enthaltenen Block zu füllen, während Inline-Level-Boxen schrumpfen, um ihren Inhalt anzupassen. Tatsächlich werden Sie aus diesem Grund alle fast nie <code>display: inline-flex</code> verwenden, es sei denn, Sie haben einen sehr guten Grund, Ihren Flex-Container inline anzuzeigen.
OK, ich weiß, dass es am Anfang vielleicht ein wenig verwirrend sein kann, aber display bezieht sich auf das übergeordnete Element, bedeutet also, wenn wir sagen: display: flex;, dann geht es um das Element und wenn wir sagen display: inline-flex;, wird auch das Element selbst inline...
Es ist wie ein div inline oder block zu machen, führen Sie den untenstehenden Ausschnitt aus und Sie können sehen, wie sich display flex in die nächste Zeile umbricht:
.inline-flex {
display: inline-flex;
}
.flex {
display: flex;
}
p {
color: red;
}
Display Inline Flex
header
nav
aside
main
footer
header
nav
aside
main
footer
Display Flex
header
nav
aside
main
footer
header
nav
aside
main
footerAußerdem erstellen Sie schnell das untenstehende Bild, um den Unterschied auf einen Blick darzustellen:
display Syntax für mehr KlarheitDie display CSS-Eigenschaft setzt tatsächlich zwei Dinge auf einmal: den äußeren Anzeigetyp und den inneren Anzeigetyp. Der äußere Anzeigetyp beeinflusst, wie das Element (das als Container fungiert) in seinem Kontext angezeigt wird. Der innere Anzeigetyp beeinflusst, wie die Kinder des Elements (oder die Kinder des Containers) angeordnet werden.
Wenn Sie die Zwei-Wert display Syntax verwenden, die nur von einigen Browsern wie Firefox unterstützt wird, ist der Unterschied zwischen den beiden viel offensichtlicher:
display: block ist äquivalent zu display: block flowdisplay: inline ist äquivalent zu display: inline flowdisplay: flex ist äquivalent zu display: block flexdisplay: inline-flex ist äquivalent zu display: inline flexdisplay: grid ist äquivalent zu display: block griddisplay: inline-grid ist äquivalent zu display: inline gridblock oder inline:Ein Element mit dem äußeren Anzeigetyp block nimmt die gesamte verfügbare Breite ein, wie es z.B. ein
tut. Ein Element mit dem äußeren Anzeigetyp inline nimmt nur die benötigte Breite ein, mit Umbruch, wie es z.B. ein tut.
flow, flex oder grid:Der innere Anzeigetyp flow ist der Standard-Inner-Anzeigetyp, wenn flex oder grid nicht angegeben sind. Es ist die Art und Weise, wie Kinder-Elemente angeordnet werden, die wir z.B. in einem
gewohnt sind. flex und grid sind neue Methoden zur Anordnung von Kindern, die jeweils ihren eigenen Beitrag verdienen.
Der Unterschied zwischen display: flex und display: inline-flex liegt im äußeren Anzeigetyp, der äußere Anzeigetyp des ersten ist block und der des zweiten ist inline. Beide haben den inneren Anzeigetyp flex.
Der Unterschied zwischen "flex" und "inline-flex"
Kurze Antwort:
Eines ist inline und das andere reagiert im Grunde wie ein Blockelement (hat aber einige Unterschiede).
Längere Antwort:
Inline-Flex - Die inline-Version von flex ermöglicht es dem Element und seinen Kindern, Flex-Eigenschaften zu haben, während es weiterhin im normalen Fluss des Dokuments/Webseiten bleibt. Im Grunde genommen können Sie zwei Inline-Flex-Container in derselben Zeile platzieren, wenn die Breiten klein genug wären, ohne zusätzliche Stilisierung, um ihnen zu ermöglichen, in derselben Zeile zu existieren. Dies ist ziemlich ähnlich wie "inline-block".
Flex - Der Container und seine Kinder haben Flex-Eigenschaften, aber der Container reserviert die Zeile, da er aus dem normalen Fluss des Dokuments herausgenommen wird. Es reagiert wie ein Blockelement, was den Dokumentenfluss betrifft. Zwei Flexbox-Container könnten nicht ohne zusätzliche Stilisierung in derselben Zeile existieren.
Das Problem, das Sie möglicherweise haben
Aufgrund der Elemente, die Sie in Ihrem Beispiel aufgelistet haben, obwohl ich raten kann, denke ich, dass Sie Flex verwenden möchten, um die aufgelisteten Elemente in einer gleichmäßigen Zeile-für-Zeile-Anordnung anzuzeigen, aber dennoch die Elemente nebeneinander sehen möchten.
Der Grund, warum Sie wahrscheinlich Probleme haben, liegt darin, dass flex und inline-flex standardmäßig die "flex-direction" Eigenschaft auf "row" gesetzt haben. Dies zeigt die Kinder nebeneinander an. Das Ändern dieser Eigenschaft auf "column" ermöglicht es Ihren Elementen, sich zu stapeln und Platz (Breite) in der Breite seines Elternelements zu reservieren.
Unten finden Sie einige Beispiele, um zu zeigen, wie Flex vs. Inline-Flex funktioniert und auch eine schnelle Demo, wie Inline vs. Blockelemente funktionieren...
display: inline-flex; flex-direction: row; display: flex; flex-direction: row; display: inline-flex; flex-direction: column; display: flex; flex-direction: column; display: inline; display: block Außerdem eine großartige Referenzdokumentation: Ein kompletter Leitfaden zu Flexbox - css tricks
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
