Hol das Poster!
Nutzt du diesen Leitfaden oft? Hier ist ein hochauflösendes Bild, das du drucken kannst!
Hintergrund
Das Flexbox Layout (Flexible Box)-Modul (eine W3C Candidate Recommendation vom Oktober 2017) zielt darauf ab, eine effizientere Methode zum Layouten, Ausrichten und Verteilen von Platz unter Elementen in einem Container bereitzustellen, selbst wenn deren Größe unbekannt und/oder dynamisch ist (daher das Wort „flex“).
Die Hauptidee hinter dem Flex-Layout ist, dem Container die Fähigkeit zu geben, die Breite/Höhe (und Reihenfolge) seiner Elemente zu ändern, um den verfügbaren Platz optimal zu füllen (meistens um sich an alle Arten von Anzeigegeräten und Bildschirmgrößen anzupassen). Ein Flex-Container dehnt Elemente aus, um verfügbaren freien Platz zu füllen, oder schrumpft sie, um Überlauf zu verhindern.
Am wichtigsten ist, dass das Flexbox-Layout richtungsunabhängig ist, im Gegensatz zu den regulären Layouts (Block, das vertikal basiert ist, und Inline, das horizontal basiert ist). Während diese gut für Seiten funktionieren, fehlt ihnen die Flexibilität (kein Wortspiel beabsichtigt), um große oder komplexe Anwendungen zu unterstützen (insbesondere wenn es um Orientierungsänderungen, Größenänderungen, Strecken, Schrumpfen usw. geht).
Hinweis: Das Flexbox-Layout eignet sich am besten für die Komponenten einer Anwendung und kleine Layouts, während das Grid-Layout für größere Layouts vorgesehen ist.
Grundlagen und Terminologie
Da Flexbox ein ganzes Modul und keine einzelne Eigenschaft ist, beinhaltet es viele Dinge, einschließlich seines gesamten Satzes von Eigenschaften. Einige davon sind dazu gedacht, am Container (Elternelement, bekannt als „Flex-Container“) festgelegt zu werden, während die anderen an den Kindern (genannt „Flex-Items“) festgelegt werden sollen.
Wenn das „reguläre“ Layout sowohl auf Block- als auch auf Inline-Flussrichtungen basiert, basiert das Flex-Layout auf „Flex-Flussrichtungen“. Bitte sieh dir diese Abbildung aus der Spezifikation an, die die Hauptidee hinter dem Flex-Layout erklärt.
Elemente werden entweder entlang der Hauptachse (von main-start bis main-end) oder der Querachse (von cross-start bis cross-end) angeordnet.
- Hauptachse – Die Hauptachse eines Flex-Containers ist die primäre Achse, entlang der die Flex-Elemente angeordnet werden. Achtung, sie ist nicht unbedingt horizontal; dies hängt von der Eigenschaft
flex-directionab (siehe unten). - main-start | main-end – Die Flex-Elemente werden innerhalb des Containers beginnend bei main-start und bis main-end platziert.
- main size – Die Breite oder Höhe eines Flex-Elements, je nachdem, welche in der Hauptdimension liegt, ist die Hauptgröße des Elements. Die Hauptgrößen-Eigenschaft des Flex-Elements ist entweder die 'width'- oder 'height'-Eigenschaft, je nachdem, welche in der Hauptdimension liegt.
- Querachse – Die zur Hauptachse senkrechte Achse wird Querachse genannt. Ihre Richtung hängt von der Richtung der Hauptachse ab.
- cross-start | cross-end – Flex-Linien werden mit Elementen gefüllt und beginnend an der cross-start-Seite des Flex-Containers und in Richtung der cross-end-Seite in den Container platziert.
- cross size – Die Breite oder Höhe eines Flex-Elements, je nachdem, welche in der Querdimension liegt, ist die Quergröße des Elements. Die Quergrößen-Eigenschaft ist entweder die 'width'- oder 'height'-Eigenschaft, die in der Querdimension liegt.
Flexbox-Eigenschaften
Eigenschaften für das Elternelement
(Flex-Container)
display
Dies definiert einen Flex-Container; inline oder block, je nach dem gegebenen Wert. Es ermöglicht einen Flex-Kontext für alle seine direkten Kinder.
.container {
display: flex; /* or inline-flex */
}Beachte, dass CSS-Spalten keine Auswirkung auf einen Flex-Container haben.
flex-direction
Dies legt die Hauptachse fest und definiert somit die Richtung, in der Flex-Items im Flex-Container platziert werden. Flexbox ist (abgesehen von optionalem Umbruch) ein unidirektionales Layout-Konzept. Stell dir Flex-Items vor, die primär entweder in horizontalen Reihen oder vertikalen Spalten angeordnet sind.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}row(Standard): von links nach rechts inltr; von rechts nach links inrtlrow-reverse: von rechts nach links inltr; von links nach rechts inrtlcolumn: wierow, aber von oben nach untencolumn-reverse: wierow-reverse, aber von unten nach oben
flex-wrap
Standardmäßig versuchen alle Flex-Elemente, in eine Zeile zu passen. Du kannst das ändern und den Elementen erlauben, bei Bedarf mit dieser Eigenschaft umzubrechen.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}nowrap(Standard): alle Flex-Elemente werden in einer Zeile seinwrap: Flex-Elemente werden auf mehrere Zeilen umbrechen, von oben nach unten.wrap-reverse: Flex-Elemente werden auf mehrere Zeilen umbrechen, von unten nach oben.
Hier gibt es einige visuelle Demos von flex-wrap.
flex-flow
Dies ist eine Kurzform für die Eigenschaften flex-direction und flex-wrap, die zusammen die Haupt- und Querachsen des Flex-Containers definieren. Der Standardwert ist row nowrap.
.container {
flex-flow: column wrap;
}justify-content
Dies definiert die Ausrichtung entlang der Hauptachse. Es hilft, den verbleibenden freien Platz zu verteilen, wenn alle Flex-Items in einer Zeile unflexibel sind oder flexibel sind, aber ihre maximale Größe erreicht haben. Es übt auch eine gewisse Kontrolle über die Ausrichtung von Elementen aus, wenn sie die Zeile überlaufen.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}flex-start(Standard): Elemente werden zum Beginn der Flex-Richtung hin gepackt.flex-end: Elemente werden zum Ende der Flex-Richtung hin gepackt.start: Elemente werden zum Beginn derwriting-mode-Richtung hin gepackt.end: Elemente werden zum Ende derwriting-mode-Richtung hin gepackt.left: Elemente werden zur linken Kante des Containers hin gepackt, es sei denn, dies ist mit derflex-directionnicht sinnvoll, dann verhält es sich wiestart.right: Elemente werden zur rechten Kante des Containers hin gepackt, es sei denn, dies ist mit derflex-directionnicht sinnvoll, dann verhält es sich wieend.center: Elemente werden entlang der Linie zentriertspace-between: Elemente werden gleichmäßig in der Linie verteilt; das erste Element befindet sich am Anfang der Linie, das letzte Element am Ende der Liniespace-around: Elemente werden gleichmäßig in der Linie mit gleichem Abstand um sie herum verteilt. Beachte, dass die Abstände visuell nicht gleich sind, da alle Elemente auf beiden Seiten den gleichen Abstand haben. Das erste Element hat einen Abstand von einer Einheit zur Containerkante, aber zwei Einheiten Abstand zum nächsten Element, da dieses nächste Element seinen eigenen Abstand hat, der angewendet wird.space-evenly: Elemente werden so verteilt, dass der Abstand zwischen zwei beliebigen Elementen (und der Abstand zu den Rändern) gleich ist.
Beachte, dass die Browser-Unterstützung für diese Werte nuanciert ist. Zum Beispiel wurde space-between von einigen Edge-Versionen nie unterstützt, und start/end/left/right sind noch nicht in Chrome. MDN hat detaillierte Diagramme. Die sichersten Werte sind flex-start, flex-end und center.
Es gibt auch zwei zusätzliche Schlüsselwörter, die Sie mit diesen Werten kombinieren können: safe und unsafe. Die Verwendung von safe stellt sicher, dass Sie, egal wie Sie diese Art der Positionierung vornehmen, ein Element nicht so verschieben können, dass es außerhalb des Bildschirms (z.B. oben) gerendert wird, und zwar so, dass der Inhalt nicht mehr gescrollt werden kann (genannt „Datenverlust“).
align-items
Dies definiert das Standardverhalten, wie Flex-Elemente entlang der Querachse auf der aktuellen Linie angeordnet werden. Stell es dir als die justify-content-Version für die Querachse vor (senkrecht zur Hauptachse).
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}stretch(Standard): dehnt sich aus, um den Container zu füllen (respektiert immer noch min-width/max-width)flex-start/start/self-start: Elemente werden am Anfang der Querachse platziert. Der Unterschied zwischen diesen ist subtil und betrifft die Einhaltung derflex-direction-Regeln oder derwriting-mode-Regeln.flex-end/end/self-end: Elemente werden am Ende der Querachse platziert. Der Unterschied ist wiederum subtil und betrifft die Einhaltung derflex-direction-Regeln im Vergleich zu denwriting-mode-Regeln.center: Elemente werden in der Querachse zentriertbaseline: Elemente werden so ausgerichtet, dass ihre Grundlinien übereinstimmen
Die Modifikatorschlüsselwörter safe und unsafe können in Verbindung mit allen anderen Schlüsselwörtern verwendet werden (obwohl die Browserunterstützung zu beachten ist) und helfen, zu verhindern, dass Elemente so ausgerichtet werden, dass der Inhalt unzugänglich wird.
align-content
Dies richtet die Zeilen eines Flex-Containers aus, wenn zusätzlicher Platz in der Querachse vorhanden ist, ähnlich wie justify-content einzelne Elemente in der Hauptachse ausrichtet.
Hinweis: Diese Eigenschaft wirkt sich nur auf mehrzeilige flexible Container aus, bei denen flex-wrap auf wrap oder wrap-reverse gesetzt ist. Ein einzeiliger flexibler Container (d.h. bei dem flex-wrap auf seinen Standardwert no-wrap gesetzt ist) wird align-content nicht widerspiegeln.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}normal(Standard): Die Elemente werden in ihrer Standardposition gepackt, als ob kein Wert gesetzt wäre.flex-start/start: Elemente werden am Anfang des Containers gepackt. Das (besser unterstützte)flex-startberücksichtigt dieflex-direction, währendstartdiewriting-mode-Richtung berücksichtigt.flex-end/end: Elemente werden am Ende des Containers gepackt. Das (besser unterstützte)flex-endberücksichtigt dieflex-direction, währendenddiewriting-mode-Richtung berücksichtigt.center: Elemente zentriert im Containerspace-between: Elemente gleichmäßig verteilt; die erste Zeile ist am Anfang des Containers, während die letzte am Ende istspace-around: Elemente gleichmäßig verteilt mit gleichem Abstand um jede Zeilespace-evenly: Elemente werden gleichmäßig mit gleichem Abstand um sie herum verteilt.stretch: Linien dehnen sich, um den verbleibenden Platz einzunehmen
Die Modifikatorschlüsselwörter safe und unsafe können in Verbindung mit allen anderen Schlüsselwörtern verwendet werden (obwohl die Browserunterstützung zu beachten ist) und helfen, zu verhindern, dass Elemente so ausgerichtet werden, dass der Inhalt unzugänglich wird.
gap, row-gap, column-gap
Die gap-Eigenschaft steuert explizit den Abstand zwischen Flex-Items. Sie wendet diesen Abstand nur zwischen den Items an, nicht an den äußeren Rändern.
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}Das Verhalten könnte als ein minimaler Spalt verstanden werden, denn wenn der Spalt irgendwie größer ist (aufgrund von etwas wie justify-content: space-between;), dann wirkt sich der Gap nur aus, wenn dieser Raum kleiner werden würde.
Es ist nicht ausschließlich für Flexbox, gap funktioniert auch in Grid- und Mehrspalten-Layouts.
Eigenschaften für die Kinder
(Flex-Items)
order
Standardmäßig werden Flex-Items in der Quellreihenfolge angeordnet. Die Eigenschaft order steuert jedoch die Reihenfolge, in der sie im Flex-Container erscheinen.
.item {
order: 5; /* default is 0 */
}Elemente mit der gleichen order kehren zur Quellreihenfolge zurück.
flex-grow
Dies definiert die Fähigkeit eines Flex-Items, bei Bedarf zu wachsen. Es akzeptiert einen einheitenlosen Wert, der als Proportion dient. Es bestimmt, wie viel des verfügbaren Platzes im Flex-Container das Element einnehmen soll.
Wenn alle Elemente flex-grow auf 1 gesetzt haben, wird der verbleibende Platz im Container gleichmäßig auf alle Kinder verteilt. Wenn eines der Kinder einen Wert von 2 hat, würde dieses Kind doppelt so viel Platz einnehmen wie jedes der anderen (oder es wird es zumindest versuchen).
.item {
flex-grow: 4; /* default 0 */
}Negative Zahlen sind ungültig.
flex-shrink
Dies definiert die Fähigkeit eines Flex-Items, bei Bedarf zu schrumpfen.
.item {
flex-shrink: 3; /* default 1 */
}Negative Zahlen sind ungültig.
flex-basis
Dies definiert die Standardgröße eines Elements, bevor der verbleibende Platz verteilt wird. Es kann eine Länge (z. B. 20%, 5rem usw.) oder ein Schlüsselwort sein. Das Schlüsselwort auto bedeutet „schau dir meine Breite- oder Höhen-Eigenschaft an“ (was vorübergehend durch das Schlüsselwort main-size erledigt wurde, bis es veraltet wurde). Das Schlüsselwort content bedeutet „Größe basierend auf dem Inhalt des Elements“ – dieses Schlüsselwort wird noch nicht gut unterstützt, daher ist es schwierig zu testen und noch schwieriger zu wissen, was seine Geschwister max-content, min-content und fit-content tun.
.item {
flex-basis: | auto; /* default auto */
}Wenn auf 0 gesetzt, wird der zusätzliche Platz um den Inhalt nicht berücksichtigt. Wenn auf auto gesetzt, wird der zusätzliche Platz basierend auf dem flex-grow-Wert verteilt. Siehe diese Grafik.
flex
Dies ist die Kurzform für flex-grow, flex-shrink und flex-basis zusammen. Die zweiten und dritten Parameter (flex-shrink und flex-basis) sind optional. Der Standardwert ist 0 1 auto, aber wenn Sie ihn mit einem einzelnen Zahlenwert setzen, wie flex: 5;, ändert sich der flex-basis auf 0%, so dass es so ist, als ob Sie flex-grow: 5; flex-shrink: 1; flex-basis: 0%; setzen würden.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}Es wird empfohlen, diese Kurzform-Eigenschaft zu verwenden, anstatt die einzelnen Eigenschaften zu setzen. Die Kurzform setzt die anderen Werte intelligent.
align-self
Dies erlaubt, die Standardausrichtung (oder die durch align-items angegebene) für einzelne Flex-Items zu überschreiben.
Bitte sieh dir die Erklärung zu align-items an, um die verfügbaren Werte zu verstehen.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}Beachte, dass float, clear und vertical-align keine Auswirkung auf ein Flex-Item haben.
Flexbox Präfixe
Flexbox erfordert einige Herstellerpräfixe, um möglichst viele Browser zu unterstützen. Es beinhaltet nicht nur das Voranstellen von Eigenschaften mit dem Herstellerpräfix, sondern es gibt tatsächlich völlig unterschiedliche Eigenschaften- und Wertnamen. Dies liegt daran, dass sich die Flexbox-Spezifikation im Laufe der Zeit geändert hat, wodurch „alte“, „tweener“ und „neue“ Versionen entstanden sind.
Der beste Weg, dies zu handhaben, ist vielleicht, in der neuen (und endgültigen) Syntax zu schreiben und Ihr CSS durch Autoprefixer laufen zu lassen, der die Fallbacks sehr gut handhabt.
Alternativ gibt es hier ein Sass-@mixin, das bei der Präfixierung hilft und Ihnen auch eine Vorstellung davon gibt, welche Art von Dingen getan werden müssen.
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}
Beispiele
Beginnen wir mit einem sehr einfachen Beispiel, das ein fast alltägliches Problem löst: perfekte Zentrierung. Einfacher geht es mit Flexbox nicht.
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}Dies beruht darauf, dass ein auf auto gesetzter Margin in einem Flex-Container zusätzlichen Platz absorbiert. Ein Margin von auto bewirkt also, dass das Element in beiden Achsen perfekt zentriert wird.
Lass uns nun weitere Eigenschaften verwenden. Stell dir eine Liste von 6 Elementen vor, alle mit festen Dimensionen, aber automatisch skalierbar. Wir möchten, dass sie auf der horizontalen Achse gleichmäßig verteilt sind, so dass beim Ändern der Browsergröße alles schön skaliert wird, und das ohne Media Queries.
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}Fertig. Alles andere ist nur Styling. Unten ist ein Pen mit diesem Beispiel. Geh unbedingt zu CodePen und versuche, deine Fenster zu vergrößern und zu verkleinern, um zu sehen, was passiert.
Versuchen wir etwas anderes. Stell dir vor, wir haben ein rechtsbündiges Navigationselement ganz oben auf unserer Website, aber wir möchten, dass es auf mittelgroßen Bildschirmen zentriert und auf kleinen Geräten einspaltig ist. Einfach genug.
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}Lassen Sie uns etwas noch Besseres ausprobieren, indem wir mit der Flexibilität von Flex-Elementen spielen! Wie wäre es mit einem Mobile-First-3-Spalten-Layout mit vollbreiter Kopf- und Fußzeile. Und unabhängig von der Quellreihenfolge.
.wrapper {
display: flex;
flex-flow: row wrap;
}
/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}
/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
Flexbox-Tricks!
Adaptives Foto-Layout mit Flexbox
Balancing on a Pivot with Flexbox
Flexbox und Textauslassung zusammen verwenden
Nützliche Flexbox-Technik: Ausrichtungsverschiebung und Umbruch
Entwerfen eines Produktseiten-Layouts mit Flexbox
Flexbox und abgeschnittener Text
Flexbox und absolute Positionierung
Füllen des Platzes in der letzten Zeile mit Flexbox
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, das mehr Details bietet. Eine Zahl zeigt an, dass der Browser die Funktion ab dieser Version und höher unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 21* | 28 | 11 | 12 | 6.1* |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4 | 7.0-7.1* |
Bugs
Flexbox ist sicherlich nicht ohne seine Bugs. Die beste Sammlung davon, die ich gesehen habe, ist Flexbugs von Philip Walton und Greg Whitworth. Es ist ein Open-Source-Ort, um alle zu verfolgen, daher denke ich, dass es am besten ist, einfach dorthin zu verlinken.
Verwandte Eigenschaften
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
align-self
.box { align-self: flex-end; }
column-gap
.example { column-gap: 25px; }
display
.element { display: inline-block; }
gap
.element { gap: 20px 30px; }
justify-items
.element { justify-items: center; }
flex
.element { flex: 1 1 100px; }
flex-basis
.element { flex-basis: 100px; }
flex-direction
.element { flex-direction: column-reverse; }
flex-flow
.element { flex-flow: row wrap; }
flex-grow
.flex-item { flex-grow: 2; }
flex-shrink
.element { flex-shrink: 2; }
flex-wrap
.example { flex-wrap: wrap; }
justify-content
.element { justify-content: center; }
justify-self
.element { justify-self: stretch; }
row-gap
.element { row-gap: 2rem; }
Weitere Informationen
- CSS Flexible Box Layout Module Level 1 (W3C)
- Ein CSS Flexbox Spickzettel (DigitalOcean)
- Dinge in CSS mit Flexbox zentrieren (DigitalOcean)
Gelöst durch Flexbox
Flexbox Spickzettel
Tauche ein in Flexbox
Anwendungsfälle für Flexbox
Schnell! Was ist der Unterschied zwischen Flexbox und Grid?
Ersetzt CSS Grid Flexbox?
Grid für Layout, Flexbox für Komponenten
Sollte ich Grid oder Flexbox verwenden?
Nicht überdenken (Flexbox) Grids
Erstellen mehrdirektionaler Layouts
Wie automatische Ränder in Flexbox funktionieren
`flex-grow` ist seltsam. Oder doch nicht?
Flex-Grow, Flex-Shrink und Flex-Basis verstehen
IE10-kompatible Grid-Autoplatzierung mit Flexbox
„Alte“ Flexbox und „Neue“ Flexbox
Flexbox verwenden: Alt und Neu mischen für die beste Browser-Unterstützung
Weitere Quellen
- CSS Flexible Box Layout Module Level 1 (W3C)
- Ein CSS Flexbox Spickzettel (DigitalOcean)
- Dinge in CSS mit Flexbox zentrieren (DigitalOcean)
- CSS Layout: Flexbox (MDN)
- Anwendungsfälle für Flexbox (Smashing Magazine)
Juhu. Weniger Javascript und mehr CSS. Was gibt es daran nicht zu mögen? Tolle Infos, wie immer!
Flexbox ist gut, aber es ist immer noch nicht gültig für ein einfaches perfektes „Produkt-Grid“ ohne Ränder bei den ersten und letzten Elementen in einer Reihe und linksbündig. Ansonsten: Könntest du dieses Layout mit Flexbox erstellen? http://i.snag.gy/VHJsV.jpg Danke
@Alex Ja, das geht. Auf die gleiche Weise, wie Sie es bei Nicht-Flex-Grids tun, wenden Sie einen negativen margin-left auf den Grid-Wrapper an und wenden Sie denselben Wert als padding-left auf alle Grid-Spalten an.
Schau dir http://inuitcss.com an, wie es mit Inline-Block-Elementen gemacht wird, was dir auch erlaubt, die vertikale Ausrichtung auf Spalten anzuwenden.
@Alex @Lawrence Das hat wenig mit Flexbox selbst zu tun.
.el:not(:last-of-type)und ähnliche Ausschlussselektoren. Negative Margins sind Unsinn.@mystrdat Du hast Recht, es hat nichts mit Flexbox zu tun. Die Verwendung von :not-Selektoren wird jedoch nicht skalierbar sein, und du verlierst die IE8-Unterstützung (jetzt weniger ein Problem).
Wenn ich ein Raster mit 8 Elementen habe, von denen jedes 25% der Breite einnimmt, versagt diese Technik, da das 4. Element nicht bündig mit den Containerkanten abschließt.
Wenn ich ein Raster mit 4 Elementen habe, 25% Breite auf dem Desktop und dann 50% Breite auf dem Handy, versagt diese Technik wiederum aus dem oben genannten Grund. Wie wäre es mit der Verwaltung von Dritteln, Fünfteln, Sechsteln, Zwölfteln usw., und wenn Spalten unterschiedliche Breiten über Viewports verwenden sollen?
Ich würde negative Margins nicht als Unsinn bezeichnen. Vielleicht nicht ideal, aber sie lösen ein komplexes Problem elegant. http://tympanus.net/codrops/2013/02/04/creating-nestable-dynamic-grids/
@Alex .. eigentlich ist es viel einfacher. Benutze einfach
Mehr hier
Danke für die Info.
Die CSS Working Group hat ein Online-Dokument über „...Fehler im Design von CSS“, einer davon ist dieser:
Können Sie darüber sprechen, was sie damit meinen?
Für Ihr letztes Beispiel, wie würden Sie den Inhalt (mittlere Reihe) dazu bringen, den gesamten verfügbaren Platz einzunehmen, sodass die Fußzeile mindestens am unteren Rand des Fensters fixiert ist – aber wenn der Inhaltsbereich mehr Inhalt hat, wird die Fußzeile nach unten verschoben, was das Scrollen ermöglicht. Dies kann erreicht werden, indem eine min-height für die Inhaltszeile gesetzt wird: calc(100% – header-height – footer-height), aber es erfordert, soweit ich weiß, Hardcoding oder JS, um dies zu erreichen.
@Lawrence an dem Punkt, an dem Flex verwendet wird, wird IE8 nicht schon zu einem Problem? Ich denke, die Rasterlösung könnte mit nth-child gelöst werden. Dann mit Media Queries entsprechende Anpassungen basierend auf dem Bildschirm des Benutzers vornehmen.
Perfektes Produkt Flexbox Layout (mit justify-content: space-between und Füllprodukten)
Obwohl ich ehrlich gesagt nicht mag, dass ich Füllstoffe für die Flexbox-Implementierung verwenden musste, um sicherzustellen, dass die letzte Zeile gleichmäßig verteilt ist.
Es wäre sehr schön, wenn sie Flexbox-Zeilenselektoren für mehrzeilige Umbruchflüsse anbieten würden.
Hier ist eine alternative Implementierung mit display inline-block
Ihr letztes Beispiel funktioniert nur ohne Inhalt. Wenn Sie Text in Aside1 einfügen, ist das 3-Spalten-Layout verschwunden.
@Hubert: Ja, das 3-Spalten-Layout benötigt diese Ergänzung.
Ich habe es vor einer Weile in einem früheren Beitrag erwähnt und angenommen, jemand würde die Demo aktualisieren. ;)
@Josh McCullough, das ist ziemlich einfach zu erreichen, besser und einfacher als je zuvor. Verwenden Sie einfach die Flex-Eigenschaft und setzen Sie sie auf 1, z.B.
flex ist eine sehr mächtige Eigenschaft und kann in der Kurzform flex: 1 1 auto; (grow, shrink und basis) verwendet werden – nur flex: 1 sagt ihr, dass sie den gesamten verbleibenden Platz einnehmen soll, wodurch der Footer am unteren Rand klebt. Achten Sie auf Grid, um einen ordnungsgemäßen Eintrag in die Browser zu erhalten, und wir hätten Magie auf unseren Tellern in Bezug auf Layouts.
Sehen Sie es live in Aktion: https://codepen.io/anon/pen/WrOqma
Nun, es ist auf vielen Ebenen schlecht. Zu ausführlich, schwer zu verwalten, es entstehen bereits "Frameworks" darum, nur um es handhabbar zu machen. Vor 25 Jahren hatten wir bereits Tools, WYSIWYG-IDEs und Wege, um UI und "responsive" Ansichten zu definieren... Um Himmels willen, können wir zu den Wurzeln zurückkehren und eine einfache und effektive Auszeichnungssprache mit UI-Tools und einfachen Größenänderungsregeln für Ansichtselemente entwickeln!?
Bezüglich der
flex-EigenschaftDie Aussage, dass die 2. und 3. Parameter
<flex-shrink>und<flex-basis>optional sind, ist leicht irreführend, da sie impliziert, dass<flex-grow>(der 1. Parameter) niemals optional ist. Die Wahrheit ist,<flex-grow>ist optional, solange<flex-basis>vorhanden ist (und offensichtlich, wenn der Wertnoneist). Es ist nur erforderlich, wenn<flex-shrink>vorhanden ist.<article class="main"><aside class="aside aside-1">Aside 1</aside>Als dieser Artikel und Aside als HTML-Tag kamen, wusste ich das nie.
@Yazin
Das ist nicht korrekt. Space-between würde alle Elemente in der letzten Zeile über die gesamte Breite verteilen, was Alex nicht wollte.
Ihr Beispiel gibt
.main { flex: 2 0px; }an, aber Ihr CodePen verwendet.main { flex: 3 0px; }.Das hat mich eine Weile verwirrt... Ich fragte mich, warum die Boxen nicht die erwarteten Breiten hatten. :p
Toller Artikel, danke.
Wow, das ist so cool, kann es kaum erwarten, es auszuprobieren
Hallo Chris,
Vielen Dank für die ausführliche Ausarbeitung.
Ich habe Firefox gerade auf v20 auf einem Mac aktualisiert und jetzt funktionieren alle Flex-Box-Demos nicht mehr. In Chrome sieht immer noch alles super aus.
Hat sonst noch jemand dieses Problem?
Probleme mit Ch 34.0.1847 auf OSX 10.9.2
Danke für die Ausarbeitung, Chris!
FF 2-21 (alt) – (alt) bedeutet die alte Syntax von 2009 (z.B. display: box;)
Die Demos verwenden die neuen Flexbox-Spezifikationen, die FF 22+ erfordern.
Funktioniert bei mir nicht unter Ubuntu 14.04 mit Firefox 29
Das Einzige, was ich nicht verstehe, ist, warum die Verwendung von Präfixen notwendig ist, wenn sich die Syntax nicht von der Empfehlung unterscheidet.
Ich denke, was ausreichen würde, ist (mit dem obigen Beispiel)
Im Moment wird dies nicht unterstützt, aber ich denke, es sollte, weil alles, was hier weggelassen wurde, die empfohlene Syntax hatte. Die Präfixe sollten bei Bedarf weiterhin verfügbar sein, aber es sollte nicht notwendig sein.
Gute Erklärung der Notwendigkeit mehrerer herstellerpräfixter Regeln hier. Siehe Codebeispiele mit Kommentaren...
Herstellerpräfixe betreffen nicht nur Syntaxunterschiede. Sie trennen (wohl viel wichtiger) Implementierungsunterschiede. Was würde passieren, wenn wir nur ein nicht-präfixiertes Wort für ein Feature hätten und die Syntax seiner Attribute in allen Browsern konsistent wäre, aber das Rendering-Verhalten unterschiedlich wäre? Dann müssten Sie hässliches Browser-Sniffing betreiben und dem Client bedingt unterschiedliche Dateien bereitstellen, wie wir es in den dunklen Zeiten von IE6 taten.
Sobald jeder eine korrekte Implementierung hat, dann können die Präfixe entfernt werden. Andernfalls wird die Implementierung des Features des beliebtesten Browsers zum De-facto-Standard, selbst wenn sie die am meisten fehlerhafte ist (wiederum IE6)
Bezüglich des Beispiels mit den 6 Elementen fester Dimensionen, die gleichmäßig verteilt werden sollen – unter Verwendung der
justify-content: space-around; Regel
Das würde ich wirklich gerne verwenden, aber es tut nicht genau das, was ich will. Nehmen wir an, es ist nur Platz für 4 der Elemente in der ersten Reihe, die restlichen 2 werden in der zweiten Reihe gleichmäßig verteilt sein. (ughh)
Gibt es eine Möglichkeit, dass Elemente in der letzten Reihe unter den Elementen der vorherigen Reihe platziert/ausgerichtet werden (links->rechts)??
Dies ist etwas, das mit dem Grid-Layout-Modul erreicht werden kann, aber es wird noch nicht von den Browsern unterstützt.
Man könnte immer Tabellen und calc() verwenden
@Coolcat007 Sie erwähnen, dass dies mit Tabellen und calc() gemacht werden kann – ist das so – auch wenn Sie eine dynamische Anzahl von Elementen haben?? Wenn ja – gibt es eine Chance auf ein Fiddle / Codepen?
Danke!
Damit die Elemente in die zweite Zeile umbrechen, können Sie flex-wrap: wrap verwenden, und um die Elemente in der zweiten Zeile auszurichten, können Sie sie mit align-content manipulieren.
Beispiel
flex-wrap: wrap;
align-content: (mögliche Werte)
flex-start: Linien an den Anfang des Containers gepackt
flex-end: Linien an das Ende des Containers gepackt
center: Linien in die Mitte des Containers gepackt
space-between: Linien gleichmäßig verteilt; die erste Linie ist am Anfang des Containers, während die letzte am Ende ist
space-around: Linien gleichmäßig verteilt mit gleichem Abstand um jede Linie
stretch (Standard)
Justify content behandelt nur die Elemente in der ersten Zeile.
@Daniel
Entschuldigung, ich habe Ihre Frage falsch verstanden. Für eine dynamische Anzahl von Elementen funktioniert dies nicht ohne JS oder php.
Dies ist in der Tat eine Sache, die hinzugefügt werden könnte.
So etwas wie align-items:main-axis /cross-axis könnte eine großartige Ergänzung sein.
Funktioniert wunderbar in Chrome und Safari, aber ich benutze FireFox (v21) und es funktioniert überhaupt nicht gut. Es erlaubt den Absätzen nicht, umzubrechen. Es ist, als würde es display:flex als display:inline-flex behandeln. Die einzige Möglichkeit, dies zu umgehen, bestand darin, die about:config von Firefox auf mehrzeilig zu ändern, aber Besucher werden dies nicht standardmäßig eingestellt haben.
Hat jemand damit Erfolg gehabt? Derzeit verwende ich Flexbox für Webkit und equalize.js für andere Browser.
Ich glaube, das liegt daran, dass Flexbox von Firefox erst ab v22 vollständig unterstützt wird. Deshalb verwende ich im Moment die v22 Beta. Sie können jederzeit display:box verwenden, bis ff22 veröffentlicht wird.
Bin ich verrückt genug, wenn ich das in der Produktion verwende? Ich habe eine wirklich unangenehme Situation und kann display: table nicht verwenden. Es stört die Fluidität der Bilder.
Sie können Flexbox in der Produktion ziemlich gut verwenden, solange Sie eine zuverlässige Methode zur Erkennung von weniger als idealer Unterstützung für flex-wrap mit Modernizer verwenden und ein auf Verhältnissen basierendes Rastersystem wie Singularitygs als Fallback nutzen.
Ein Beispiel: http://sassmeister.com/gist/9781525 (schalten Sie die Flexbox- und .noflex-Option um).
Es ist eine vernünftige Strategie, insofern Sie Flexbox zuerst zur Layoutplanung verwenden und den Fallback schnell mit einem auf Verhältnissen basierenden Rastersystem erstellen können.
Solange Sie rücksichtsvoll genug sind, einen Styleguide zu haben, der dokumentiert, wie eine bestimmte Komponente aussehen soll, wenn sie tatsächlich von beiden abweicht, sollte es Ihnen gut gehen.
Flexbox ist jetzt in Firefox (22) ohne Präfix.
Ich habe ein Kompass-kompatibles Mixins gefunden.
In Ihrem zweiten Codepen-Beispiel (mit der blauen Navigationsleiste) konnte ich nicht herausfinden, warum die flow-direction: column bei der kleinsten Bildschirmbreite nicht zu funktionieren scheint. Ich habe mit einigen Werten herumgespielt und festgestellt, dass das explizite Hinzufügen einer Höhe zu ul.navigation die li's vertikal stapelte. Gibt es eine bessere Möglichkeit, dies zu umgehen, ohne eine fest codierte Höhe zu benötigen?
Das liegt daran, dass dem Code für eine maximale Breite von 600 Pixeln ein flex-flow: column wrap; fehlt, wenn Sie Firefox verwenden. Es enthält nur einen für Web-Kit. Sobald ich das hinzugefügt hatte, funktionierte es in meinem FF wunderbar.
Vielen Dank für den Beitrag. Ich fand ihn sehr aufschlussreich.
Im ersten Beispiel (http://codepen.io/HugoGiraudel/pen/LklCv) passiert etwas Merkwürdiges. Ich habe versucht, es auf CodePen nachzubilden und bemerkte, dass es nicht funktionierte, selbst als ich es kopierte und einfügte! Dann versuchte ich, es lokal nachzubilden, kopierte und fügte ein, und es funktionierte wieder nicht. Also sah ich mir in den Chrome DevTools an, was los war, und es sieht so aus, als ob, obwohl der Pen die Regel justify-content: space-around; verwendet, tatsächlich -webkit-justify-content: space-around; auf der Seite gerendert wird. Es stellte sich heraus, dass prefix-free in der CodePen-Konfiguration für das Scss-Panel aktiviert war.
Auch wenn dies CodePen's prefix-free war, das die Arbeit für mich erledigte, sollte das Mischen von Vendor-präfixierten Regeln und nicht-präfixierten Regeln, die der Präprozessor transformiert, ein No-Go sein.
Vielen Dank für das Mixin, Chris
Schöner Beitrag, Chris. Mir gefällt, wie gründlich und detailliert Sie sind. Schade, dass wir SASS nicht verwenden, wir verlassen uns fast ausschließlich auf LESS. Wir würden Flexbox gerne für Kunden verwenden, aber es scheint nicht gut browserübergreifend zu funktionieren. Ich habe diese Seite in FF22 und IE10 überprüft und es war ein Chaos.
Kennen Sie oder jemand anderes gute JS-Polyfills oder Plugins oder Lösungen, um dies browserübergreifend gut zum Laufen zu bringen? Ansonsten, wie lange (Ihrer Meinung nach) dauert es, bis wir dies "realistisch" ohne viele browserübergreifende Kopfschmerzen verwenden können?
Großartiger Beitrag Chris. Ich denke, dass die Flexbox-Fähigkeit, Elemente zu ordnen, in RWD nützlich sein wird.
Ich habe nur eine Frage. Wenn Sie die Hauptachse definieren, sagen Sie, dass ihre Richtung von der Eigenschaft justify-content abhängt, aber ist es nicht die Eigenschaft flex-direction, die definiert, ob Flex-Elemente als Zeile oder als Spalte angeordnet werden? Missverstehe ich etwas?
Sie haben Recht, das war im Artikel falsch und ist jetzt behoben.
Hey, weiß jemand eine echte Seite, die Flexbox verwendet?
Ich weiß, dass SM es vor einiger Zeit versucht hat, aber zu Floats zurückgekehrt ist.
Hey ZippZipp,
Ich habe vor ein paar Monaten versucht, meine persönliche/Portfolio-Seite mit Flexbox zu erstellen, wurde aber von der Syntax super frustriert. Ich habe gerade diesen Sass-Helfer https://raw.github.com/timhettler/compass-flexbox/master/extensions/compass-flexbox/stylesheets/_flexbox.scss gefunden, der bisher wirklich gut funktioniert. Ich hoffe, meine neue Seite in den nächsten 2 Wochen mit Flexbox für alles außer IE 8/9 zu starten.
Ich würde auch gerne eine finden, aber ältere Browser machen es einfach zu mühsam... Ich würde lieber Floats verwenden, um Kopfschmerzen und weniger Code zu haben.
Erst gestern habe ich meine Browser-Unterstützung überprüft und festgestellt, dass Flex in diesen Versionen jetzt ohne Präfix ist, aber leider haben nicht alle Browserversionen aktualisiert.
IE11
Mozilla Firefox 27.0.1
Chrome 32.0.1700
Opera 19.0
Safari verwendet immer noch die Regel: "display: -webkit-box;"
Safari 5.1.7
Ich habe ein Schulprojekt mit Flexbox (mit Hilfe von Autoprefixer) gemacht: edensg.github.io/ASM2O
Ich denke, Sie meinen flex-direction.
Ich denke, bei column-reverse meinen Sie aber von unten nach oben
Vielen Dank für die ausführliche Erklärung
Firefox 22+ hat unprefixed Flexbox, aber leider unterstützt es immer noch nicht die flex-wrap Eigenschaft (und somit die flex-flow Kurzform). So sieht das wunderbare Beispiel mit dem 3-Spalten-Layout, das sich auf einem schmalen Bildschirm in Firefox auf 1 Spalte reduziert, wirklich unordentlich aus. Aber es ist möglich, ein vereinfachtes Analogon zu erstellen, das sowohl in Chromium-basierten Browsern als auch in Firefox 23+ funktioniert: http://codepen.io/anon/pen/pEIKu
Wow, es ist wirklich einer der besten Beiträge, die ich zu diesem Thema je gelesen habe. Die von Ihnen erwähnten Schritte sind wirklich perfekt.
Hey, Cris! Sieht so aus, als ob "flex-wrap" in Firefox und Opera falsch funktioniert! Sowohl die Tomatenblöcke als auch die allerletzten Demos funktionieren nicht!
Gibt es schon eine Abhilfe?
Und vielen Dank für Ihre Website! ;)
Ja, nur die neuesten Chromium-basierten Browser wie Chrome, Opera 16+ usw. scheinen derzeit mehrzeilige Flexboxen zu unterstützen. Als Workaround können Sie verschachtelte Flexboxen in Kombination mit Media Queries verwenden, wie in meinem Kommentar oben (es ist nicht so flexibel wie echte mehrzeilige Flexboxen, aber immer noch besser als nichts) oder eine graceful degradation auf alte Techniken wie Inline-Blöcke anwenden.
Ich habe festgestellt, dass in Chrome 29
<input />und<label>die Eigenschaftordernicht respektieren. Hat das noch jemand beobachtet oder hat eine Idee, warum?Flexbox ist das, was CSS seit seiner Einführung schmerzlich fehlte – eine einfache Möglichkeit, flexible Webseiten-Layouts zu erstellen, ohne Floats, Clears, margin: 0 auto und JS-Hacks zu benötigen. Ich freue mich auf den Tag, an dem Flexbox von einem ausreichend großen Anteil des Browsermarktes unterstützt wird, um dies in all unseren Produktionsseiten einzusetzen.
Vielen Dank für das großartige Tutorial, ich habe gerade das Wissen genutzt, um eine nette Möglichkeit zu finden, Turnierklammern zu bauen! Sie können das Codepen unter http://cdpn.io/qliuj überprüfen.
Ich erwische mich dabei, wie ich ein Mr. Burns "excellent" mache, da ich ziemlich begeistert bin von
align-items: stretchIch versuche, meine videoreiche Website "FLEX" zu machen. Die Website skaliert gut, aber die Vimeo-iFrame-Videos tun es nicht.
Ich habe versucht, das FitVids.js-Skript zu verwenden, um dies zum Laufen zu bringen, bin mir aber nicht sicher, wie ich das mit meiner Weebly-Vorlage (JA, ich bin kein Website-Profi, ich weiß nichts über CSS oder HTML) zum Laufen bringen kann. Aber ich wurde mit dieser Aufgabe betraut und muss sie ordnungsgemäß zum Laufen bringen. Jede Hilfe wäre dankbar. Mit dem Firebug-Plugin im Firefox-Browser habe ich diesen Code über Flex Box gesehen... Wie ändere ich dies, damit die Videos Flex werden?
Ich mag diesen Beitrag sehr. Er hat mir beim Start meines Projekts geholfen.
Ich hatte ein Problem mit Firefox wie andere Benutzer hier, aber ich habe es überwunden, indem ich die Spalten/Zeilen in weitere Container gewickelt habe, wie ein Benutzer vorschlug.
Ich habe jedoch ein weiteres Problem. Diesmal mit IE11. Wenn Sie sich Ihr Beispiel für das Menü ansehen, werden Sie feststellen, dass bei der kleinsten Breite die Menüs nicht in Spalten angezeigt werden und als Zeilen bleiben.
Auf meiner Seite hatte ich ein anderes Problem mit IE: Die Spalten wurden angezeigt, aber die Elemente darin hatten keine Höhe! So kollabierte alles grundlos. Natürlich ist es in Chrome und Firefox (25) in Ordnung.
Es gibt einen Tippfehler im Abschnitt über Flex-Grow. Er beeinträchtigt das Verständnis des Inhalts nicht, aber es wäre schön, wenn Sie ihn beheben würden.
Das W3C muss seinen Hintern hochkriegen und das durchsetzen. Eine konsistente Browser-Implementierung wird das Leben beim Erstellen von Layouts so viel einfacher machen.
Bin ich der Einzige, der denkt, dass dieser 'Artikel' in den "Artikel"-Bereich gehört?
Chris, ich konnte einige Inhalte in Printmedien nicht vertikal ausrichten, wissen Sie, wo ich mehr Informationen über diese Art von Unterstützung finden könnte?
Mein Test sieht so ähnlich aus,
CSS
HTML
Nicht alle Browser unterstützen Paged Media, funktioniert das Paged Media Beispiel ohne Flexbox?
Was bedeutet 22+ (neu) in der Firefox-Support-Tabelle?
Bedeutet Version 22 von Firefox, die neueste Version zum Zeitpunkt der Artikelerstellung.
Und das + bedeutet „und höher“
Einer der besten Artikel, die ich je gelesen habe. Danke!
Gutes Tutorial. Hat sich seit der Veröffentlichung dieses Tutorials etwas geändert?
Außerdem funktioniert es bei mir in IE10 nicht.
IE 10 hat die Tweener-Syntax, stellen Sie also sicher, dass Sie dafür Präfixe verwenden. Autoprefixer macht einen großartigen Job, die neueste Syntax zu schreiben und die Fallbacks zu handhaben.
Toller Artikel. Ich fand es hilfreich zu sehen, was am Horizont kommt. Die Firma, für die ich im Moment arbeite, verwendet IE8, daher muss ich warten, bis sie auf eine neuere Version von IE umsteigen. Ich habe mich immer gefragt, warum CSS kein gutes Layoutsystem hatte. Besser spät als nie, denke ich. Ich freue mich darauf, dies auf Touch-Geräten mit Webkit zu verwenden.
Super Arbeit, Mann!!!
Habe Probleme mit 2 Flexboxen, die horizontal ausgerichtet sind, wenn eine im Spaltenfluss und die andere im umgekehrten Spaltenfluss eingestellt ist.
Siehe Pen: Flexbox Alignment Sample
Wie kann ich das beheben? Danke!
Siehe den Pen Flexbox column-reverse Next Element Alignment von Brad Spencer (@bradomail) auf CodePen.
Einfache Lösung, denke ich. Sie müssen den Container (#window) auf Flex setzen, damit Ihre 2
<ul>s sind Flex-Kinder.
Wow, das war einfach!
Danke, Justin.
Hallo,
In Ihrem ersten Beispiel wurde das Kindelement durch (Magie!) margin: auto; zentriert;
Diese Lösung funktioniert in IE11 nicht, wenn das Kindelement keine definierte Höhe hat, z.B. wenn die Höhe durch den Inhalt bestimmt wird.
Alle anderen Browser verhalten sich wie erwartet.
Ich habe mich heute ein bisschen damit beschäftigt. Ich bin interessiert, aber gleichzeitig etwas verwirrt. Wenn ich es (buchstäblich kopiert) von dem, was Sie hier haben, in CodePen eingebe, läuft es wie bei Ihnen. Wenn ich es jedoch auf JSFiddle (wo ich normalerweise herumspiele) versuche, erscheinen die Farben nur in einer geraden Linie. Auch wenn ich die gesamte Seite über jQuery lade, wie ich es in letzter Zeit getan habe, das gleiche Ergebnis... Statt der gerahmten Umgebung, die Sie erhalten, erhielt ich flache kleine Linien. Ich habe sogar versucht, das CSS in den Header einzufügen, bevor ich die Seite über jQuery erstellt habe, mit dem gleichen Ergebnis. Es scheint, dass dies nur ohne jQuery und aus irgendeinem Grund nur auf CodePen funktioniert.
Wüssten Sie zufällig, wie ich eine horizontale Trennung (wie sie auf Code Pen haben) codieren könnte, die den oberen und unteren Teil des Fensters trennt und flüssig verschoben wird, wenn die Leiste bewegt wird, mit einem Flexbox-Framework? Jede Hilfe wäre dankbar, danke!
Die verschiebbare Leiste wird nicht nur mit CSS, Flexbox oder nicht, zustande kommen, es sei denn, man verwendet einen super verrückten Hack mit einem veränderbaren Textfeld oder ähnlichem. Auf CodePen verwenden wir jQuery UI draggable, aber es gibt auch andere. Flexbox erleichtert die Situation jedoch. Einmal habe ich das gesamte CodePen-Editor-Layout in Flexbox zur Unterhaltung neu gestaltet und es war viel einfacher, aber natürlich kann ich es jetzt nicht finden. Grundsätzlich füllen die Flex-Elemente, wenn sie flex: 1; haben, den Bereich aus, sodass Sie einfach eines von ihnen auf eine bestimmte Höhe (oder Breite) ändern und das andere den verbleibenden Platz ausfüllt. Also keine Mathematik.
Kennen Sie funktionierende Beispiele für jQuery UI Draggable für eine horizontale Teilung? Ich habe mich seit ein paar Tagen damit beschäftigt und finde es nicht heraus.
Hallo Chris,
Ich versuche, einen div zu erstellen, dessen Breite automatisch mit seinem Inhalt wächst.
Unter Verwendung dieser
Es scheint einen Fehler mit der Hauptgröße des Containers zu geben, bitte siehe diesen Pen
falsche Hauptgröße, wenn flex-direction auf Spalte steht
Können Sie Safari überprüfen...
flex-Eigenschaft nicht unterstützt.
Das ist einfach unbegreiflich
Ich fand diesen Artikel verwirrend. Ich bin Frontend-Entwickler und konnte trotzdem keinen einzigen Begriff verstehen, der verwendet wurde, um zu erklären, was ich sah.
Das ist seltsam, ich bin ein Amateur und konnte es mit Leichtigkeit lesen.
Gut gemacht. Danke, Chris.
Dies wird sicherlich ein großartiges Werkzeug sein, sobald es besser unterstützt wird. Vorerst scheint es mir am besten, sich auf JS zu verlassen oder einfach bei einem Design / Layout zu bleiben, das mit weniger fehleranfälligen (wenn Sie so wollen) Standardteilen hergestellt werden kann.
Wenn Design die Herstellung nicht berücksichtigt, dann ist das kein Design. Das ist Kunst. Es gibt einen Unterschied.
Das ist wie ein CSS-Winkel, der auf meine Zunge pisst. Großartig.
Vielleicht nicht der beste Ort, um zu fragen, aber ich kämpfe damit, ein responsives Flexbox-Fluid-Layout zu erstellen. Was ich möchte, sind 3 Breakpoints wie diese
1) 3 Zeilen (Container vertikal, kleiner Bildschirm)
2) 2 Spalten, 2 Zeilen (mittlerer Bildschirm)
3) 3 Spalten (großer Bildschirm)
1 und 3 sind einfach, ich ändere nur die flex-direction von column auf row. Aber wie sieht es mit 2) aus?
Es muss also grundsätzlich so aussehen
A
B
C
A B
C
A B C
Ich werde meine eigene Frage beantworten. Der Grund, warum ich es nicht zum Laufen bringen konnte, ist, dass IE11 keine max-width auf Flex-Items mag. Wenn Sie dies tun, berechnet er den Abstand um oder zwischen den Elementen falsch.
Evert, ich bin gerade auf dasselbe Problem gestoßen! Ich habe eine ganze Stunde lang daran gekämpft, bis ich entdeckte, dass IE11 keine max-width auf Flex-Items mag.
Toller Artikel, danke. Bezüglich der Browser-Support-Tabelle denke ich, dass IE11 die Spezifikation vollständig unterstützen könnte.
Referenz: http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx
Danke.
Bedeutet die verantwortungsvolle Verwendung von Flexbox, dass die Website zweimal mit Flexbox und den üblichen CSS-Positionierungsmethoden als Fallback für Browser, die Flexbox nicht unterstützen, codiert wird? Ich denke nur an den Workflow...
Danke Chris! Dies ist eine ausgezeichnete Flexbox-Referenz. Ich habe eine grundlegende Holy Grail-Vorlage implementiert: http://noseyparka.me.uk/2014/03/26/a-holy-grail-flexbox-layout/. Flexbox ist etwas Wunderbares!
Gute Arbeit!.
Vielen Dank für das Teilen.
Ich habe diesen Polyfill für Flexbox gefunden, http://flexiejs.com/
Dinge, die ich bei der Verwendung von Flexbox bemerkt habe und die wirklich nervig sind
Die Verwendung von margin: 0 auto; für den Flex-Container schrumpft den Container (und seine enthaltenen Flex-Items) auf die minimale Breite. Er ist nicht mehr flexibel/fluid.
Deshalb müssen alle fluiden, zentrierten Layouts justify-content: center/ oder space-between verwenden. Aber dann wird das Layout "unendlich" (man kann den Bildschirm immer breiter machen und die Boxen und Abstände verteilen sich fröhlich über diesen Raum, was möglicherweise alle Designbeschränkungen bricht). Um dies zu verhindern, könnten wir max-width auf dem Flex-Container setzen, aber das hebt die Zentrierung aus irgendeinem Grund auf und die Seite wird linksbündig. Die einzige andere Möglichkeit besteht darin, eine max-width auf ein oder mehrere Flex-Items zu setzen... aber diese werden in IE11 aufgrund eines Fehlers fehlschlagen.
Kurz gesagt: Flexbox funktioniert praktisch nur, wenn die volle Bildschirmbreite verwendet und kein flexibles Element mit einer max-width begrenzt wird. Sobald Sie einem Element eine Grenze setzen möchten, fällt es auseinander.
Auch ich sehe hier keinen anderen Vorteil, als einige Zeilen in meinen Media Queries zu begrenzen.
Das hat mich wirklich genervt und war eine Zeit lang kaputt, also wollte ich es teilen, falls jemand in Zukunft darauf stößt. Wenn Sie Blackberry 7+ unterstützen müssen, stellen Sie sicher, dass Sie verwenden
-webkit-box-orient: vertical;-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
... wenn Sie row wrap verwenden, wird es nicht umgebrochen und alles nebeneinander platziert. Auch sehr wichtig. Stellen Sie sicher, dass die Kinderelemente des übergeordneten Flex-Containers nicht
display: inline;angewendet haben. Das bricht es aus irgendeinem Grund. Ich hoffe, das hilft jemandem!Eine letzte wichtige Sache, die man beachten sollte, wenn man Blackberry 7+ unterstützen muss... stellen Sie sicher, dass alle Kinderelemente
float:noneangewendet haben... wenn Floats angewendet werden, erscheinen sie einfach nicht. Ich hoffe, das hilft!Bah, vielen Dank, das hat mir auch auf Samsung Galaxy geholfen. Prost!
Sollte in der ersten Zeile des SASS-Mixins
@mixin flexbox()nicht einfach@mixin flexboxstehen?Chris, dieses Beispiel funktioniert nicht in IE11. Könnten Sie bitte vorschlagen, wie ich Unterstützung für IE11 erhalten kann?
Der .wrapper definierte nur "-webkit-flex-flow: row wrap;", fügen Sie "flex-flow: row wrap;" hinzu und es funktioniert in IE 11 und Firefox.
Wo sind die Dinge
Das sind veraltete Eigenschaften. Ich denke, es ist an diesem Punkt am besten (zumindest im Hinblick auf diesen Leitfaden), sich auf die aktuellen Eigenschaften zu konzentrieren. Auch in der Praxis ist es am besten, ein Tool wie Autoprefixer die Aufgabe zu überlassen, diese älteren Eigenschaften bei Bedarf für Sie einzufügen.
Erstaunlicher Bericht und hervorragend erklärt, Sie haben mir ziemlich viel Zeit erspart, die ich sonst damit verbracht hätte, all dies zu lernen, indem ich all die kaputten und veralteten Artikel im Web kombiniert hätte :D vielen Dank!
Das ist ein toller Artikel. Ich würde gerne sehen, wie die Pens, die Flex Wrap verwenden, mit "flex-flow: row wrap;" aktualisiert werden, ohne Präfixe, damit sie in Firefox 29 funktionieren! Aber immer noch ein sehr guter und informativer Artikel.
Chris, das brauche ich wirklich. Danke!
Gibt es eine Möglichkeit, einen Mindestabstand zwischen Elementen anzugeben, wenn
flex-wrap: wrap;verwendet wird? Die einzige Möglichkeit, die ich bisher gefunden habe, zwingt mich dazu, ein Padding zum Container hinzuzufügen, was nicht ideal ist.Um Abstände hinzuzufügen, verwenden Sie margin-right und margin-bottom. Geben Sie dem Container (dasselbe, aber) negativen Abstand, um weiterhin die volle Breite zu nutzen.
Bitte verzeihen Sie meine Anfänger-Unwissenheit.
Ich denke, ich würde mit einer Hintergrundfarbe der Website experimentieren, dann wäre der Container eine andere Farbe (zentriert) und dann die Flex-Elemente noch eine andere Farbe.
Ich verstehe, wie man die Flex-Elemente selbst zentriert, aber wie würde man den Container selbst zentrieren? Und ist das etwas, was man überhaupt tun wollen würde?
Danke
margin: 0px auto;
Ich glaube, ich habe es herausgefunden... fühle mich gerade sehr dumm!
Hallo Chris! Sehr schöner Artikel! Aber das letzte Beispiel "mobile-first 3-Spalten-Layout mit Vollbreiten-Header und -Footer" hat in meinem 34.0.1847.131 Chrome die beiden Seitenleisten nicht auf die Hälfte der Größe des Hauptinhalts gebracht.
Ich musste schreiben
@media all and (min-width: 800px) {
.aside-1 { order: 1; flex: 1 25%; }
.main { order: 2; flex: 2 1 50%; }
.aside-2 { order: 3; flex: 1 25%; }
.footer { order: 4; }
}
In der letzten Media Query, um dies zu tun ( http://cdpn.io/rhbmd ).
Vielen Dank für die Einführung in die wunderbare Welt der Flexboxen! Großartiges Tutorial!!
Wow! Ich hatte den Artikel zuvor als Lesezeichen gespeichert und bin heute als Referenz darauf zurückgekommen. Wirklich toll die Überarbeitung, macht ihn noch nützlicher! Prost, Chris.
Großartige Arbeit am aktualisierten Format! Der Leitfaden war schon vorher wahnsinnig informativ, aber jetzt ist er auch ein großartiger Spickzettel, wenn man ihn braucht. Danke!
Tolle Anleitung, schönes Update! War immer sehr nützlich.
Eine Sache, die mir fehlt (hier und in fast jeder anderen Flexbox-Anleitung), ist, wie man Flex-Grow und Flex-Shrink in IE10 umsetzt.
flex-grow
-ms-flex-positive:;flex-shrink
-ms-flex-negative:;Es wäre toll, wenn dies irgendwo als Fußnote vermerkt wäre.
@Ry, guter Punkt. Ich benutze zufällig Autoprefixer, der diesen IE-spezifischen Eigenschaftsnamen für mich hinzugefügt hat. Sonst hätte ich es nicht gewusst.
Ich liebe alles, was mit dem Flexbox-Modell gemacht werden kann, jetzt nur noch, wenn alle Browser es auf die gleiche Weise unterstützen könnten! Wie funktioniert die Flexbox in Browsern, die CSS3 nicht unterstützen?
Vielen Dank für die Aktualisierung dieses Beitrags – bei weitem der am einfachsten zu verstehende Leitfaden zu Flexbox, der je geschrieben wurde. Dafür verdienen Sie mindestens ein Sixpack Rolling Rock, Chris – wenn das noch Ihr bevorzugtes Gebräu ist :-)
Hallo,
Ich hatte gehofft, dass mir jemand helfen könnte (ich bin ziemlich neu in all den Programmiersachen).
Ich habe eine Flexbox erstellt und die Elemente darin in einem Spaltenlayout angeordnet. Dann habe ich 'justify-content:center' verwendet, aber die Elemente bleiben auf der linken Seite des Bildschirms, obwohl die Breite des Containers 100% beträgt. Gibt es eine einfache Möglichkeit, alles in einer Containerbox zu zentrieren, wenn Elemente als Spalten angeordnet werden? Ich hoffe, das macht Sinn.
Viele Grüße,
Steve.
Hallo Stephen, ich glaube, justify-content sollte nicht für diesen Zweck verwendet werden. Wenn Sie die Elemente spaltenweise (vertikal) anordnen, wird justify-content: center die Elemente tatsächlich im mittleren Teil der Flexbox vertikal anzeigen, d.h. etwas Platz oben, dann Ihre Elemente, dann etwas Platz unten. Was Sie wollten, ist, dass jedes Element horizontal zentriert ausgerichtet wird, was Sie wahrscheinlich mit der text-align-Eigenschaft erreichen können.
Hallo Jay,
Danke, dass Sie sich so schnell bei mir gemeldet haben. Ach ja, ich schätze, da ich dem Flexbox keine Höhe zugewiesen habe, habe ich nicht gesehen, wie die Elemente vertikal zentriert wurden.
Danke,
Steve.
Danke, Chris, für den Artikel. Frisch, entscheidend und sehr wertvoll. Ich habe ihn genossen.
Unterstützt Compass Flexbox? Ich sehe, dass sie in der Dokumentation die alte Version von Flexbox zu haben scheinen. Aber auf codepen.io kann man, wenn man Compass einbindet, die anderen Direktiven verwenden. Zum Beispiel @include display-flex? Ich kann das jedoch lokal nicht zum Laufen bringen. Ideen?
Vergessen Sie Compass und verwenden Sie stattdessen Autoprefixer (mit Gulp/Grunt). Persönlich verwende ich es jetzt nur noch für vertikale Rhythmuseberechnungen, da Compass für eine Libsass in C++ ein großes No-Go sein wird.
Oh, Entschuldigung, ich habe vergessen, dass ich die neueste Version von Firefox und Chrome verwende!
Vielen Dank!
Ein bisschen weit hergeholt, aber unterstützen E-Mail-Clients Flexbox...? Wäre nützlich in HTML-E-Mails, um die Reihenfolge der Elemente neu anzuordnen.
Teste jetzt Flexbox in Safari.
Was in allen anderen Browsern funktioniert, funktioniert in Safari entweder gar nicht oder nicht richtig.
Wirklich frustrierend...
Die Demos hier funktionieren auch nicht richtig (besonders die letzte).
Diese Eigenschaft funktioniert nicht in Android 4.1.1 Browser. Wie wird sie im mobilen Browser funktionieren?
Ich denke, die Support-Tabelle ist für Safari veraltet. Sollte lauten:
6.1+ (neu)
3.1+ (alt)
Laut http://beta.caniuse.com/#search=flexbox
Ähnlich: Android 4.4+ (neu), iOS 7.1+ (neu)
Chris,
Sie haben offensichtlich viel darüber nachgedacht, wie diese Informationen so klar wie möglich präsentiert werden können.
Hervorragende Arbeit – danke.
Woher wissen Sie alle, was in welcher Browserversion funktioniert? Wie steht es jetzt um die Unterstützung von Flexbox?
Ich habe erst gestern von Flexbox erfahren, also bin ich jetzt ganz gespannt, mehr zu erfahren. Ich zögere ein wenig wegen der Browserversionsunterstützung.
Detailliertere Informationen zur Browser-Unterstützung finden Sie, wenn Sie "caniuse flexbox" in Google eingeben.
Hallo, ich fragte mich, ob mir jemand bei einem Flexbox-Problem helfen könnte. Ich habe einen Container auf 100% Breite gesetzt und sechs div-Elemente mit 20% Breite darin platziert. Ich erwartete, fünf divs gleichmäßig verteilt zu sehen und das sechste div direkt unter den anderen, eine Zeile tiefer (ich verwende row-wrap). Das funktioniert irgendwie, aber es gibt eine große Lücke zwischen den fünf divs oben auf der Seite und dem sechsten div darunter. Ich muss wissen, wie ich die Lücke beseitigen kann. Hier ist der Codepen
http://codepen.io/coxthefox/pen/jtseL
Jede Hilfe wäre sehr dankbar.
Danke,
Steve.
versuchen Sie align-content: flex-start; für den Container. Ich bin mir nicht sicher, ob es für Ihren Zweck hilft, aber mit Ihrer Demo funktioniert es.
Außerdem würde ich lieber flex: 1 1 20%; auf jedes Unterelement setzen, anstatt die Breite anzugeben (auch das hängt davon ab, was Sie tun möchten).
Hallo,
Vielen Dank für beide Tipps; der erste funktioniert gut und löst das Problem, das ich hatte.
Wenn Sie Zeit haben, würde ich mich freuen, wenn Sie den zweiten ein wenig erläutern könnten. Ehrlich gesagt, bin ich mir nicht wirklich sicher, wie der Code interpretiert wird. Ich verstehe, dass das Zuweisen einer Flex-Größe von 1 jedem Element den gleichen Platz einräumt, aber überschreibt das 20% alles das erste 1? Ich habe mit dem zweiten 1 im von Ihnen bereitgestellten Code herumgespielt, aber es scheint nichts zu bewirken. Oh, und die lila Box füllt jetzt die gesamte Bildschirmbreite aus, was gut aussieht, aber ist es das erste 1, das das bewirkt, da es jetzt eindeutig mehr als 20% des Containers einnimmt? Egal, ich möchte nicht faul sein; ich kann das morgen nachschlagen. Aber in Großbritannien ist es Zeit fürs Bett.
Nochmal vielen Dank,
Steve.
Leute, was ist mit "order". Es sieht in Safari nicht gut aus, es sieht überhaupt nicht gut aus. 8) Wie bringe ich es in Safari zum Laufen?
Ich habe Safari aufgegeben. Ich unterstütze es auf meinen Websites nicht.
Man könnte einfach auf Floats zurückgreifen, aber als ich es mit meinem Arbeitgeber besprach, sagte er: "Niemand benutzt es sowieso".
@Stephen, spielen Sie mit flex: 1 1 20%
Safari 5.7.1
Funktioniert nur dies
display: -webkit-box;Und das war's. Nichts anderes kann funktionieren :-(
Ich habe gelesen, dass diese Version von Safari (alt) ist, aber wie sollte sie aussehen?
Kann es nicht handhaben...
Im ersten Beispiel (mit den 6 orangefarbenen Quadraten)... gibt es eine Möglichkeit, die aktuelle Anzahl von Spalten und Zeilen innerhalb eines Flexbox-Containers abzufragen? Oder zumindest die aktuelle Anzahl von Zeilen (da die Spalten nicht starr sind)?
Danke!
Hallo!
Dieser Leitfaden ist wunderbar, im Ernst, der Typ, der das gemacht hat, verdient ein GROSSES, schönes Glas GUTES Bier.
Aber ich habe ein Problem
Ich habe eine Website erstellt, bei der der div des Containers flexibel ist und die Richtung Spalte ist.
In diesem Container habe ich 3 divs. Ich möchte, dass der letzte (Footer) immer am unteren Rand dieser Seite ist.
Ist das möglich? Ich weiß, es ist es natürlich ;) aber ich möchte nur das Flexbox-Modell verwenden.
Viele Grüße, Kumpels!
Ok, ich hab's, es gab keine Frage xD Entschuldigung. Danke trotzdem! Dies ist der beste Ort, um CSS Tricks zu lernen.
Nochmal viele Grüße!
Paweł, verwende order: und width: Parameter.
width: 100% und order: der letzte div in deiner Liste.
Aber beachten Sie: Internet Explorer und Safari unterstützen die Eigenschaft "order" nicht.
Und warum Breite...?
Ich habe es so gemacht
https://www.dropbox.com/s/y8wccmz7hzmkpdb/Zrzut%20ekranu%20z%202014-07-29%2011%3A57%3A31.png
Sehen Sie irgendwelche Probleme, die auftreten könnten?
IOS7 verwendet -webkit-justify-content
justify-content funktioniert nicht
eine der besten Erklärungen für das CSS-Flexbox-Modell
Toller Beitrag, Mann. Ich wollte schon immer mehr über Flexbox lernen, seit einer der Jungs in meinem Team es mir gezeigt hat. Dies ist die beste Ressource, die ich bisher gefunden habe.
Hallo
Meine Anforderung ist die Unterstützung der Ausrichtung in allen Browsern ohne die Verwendung von Javascript. Nur CSS/CSS3 verwenden.
Hinweis: Der Wert für margin-top einer bestimmten Zeile wird in allen Browsern (Mozilla, Chrome, Safari) entsprechend dem PDF unterstützt. Aber im IE-11 Browser weicht er ab. _ Im Falle einer Anpassung für den IE-11 Browser ändert sich der margin-top Wert in anderen Browsern. _ Wie kann man also alle Browseranforderungen anpassen? Falls eine Modifikation des Ausrichtungs-Stylesheets für den IE-11 möglich ist.
Bitte geben Sie eine Lösung für dieses Problem an.
Ich arbeite jetzt mit Flexbox an einigen verschiedenen Projekten und liebe es. Einziger Nachteil sind all die Präfixe, die man braucht.
Für meine Projekte habe ich ein Less-Mixin-Stylesheet erstellt, das getestet wurde und in den meisten aktuellen Browsern (neueste Version -1) funktioniert.
In der Hoffnung, noch mehr Menschen zu helfen, habe ich es auf GitHub gestellt. Wenn Sie also ein wenig Hilfe beim Einstieg benötigen, können Sie es dort herunterladen: github.com/annebosman/FlexboxLess
ja es ist gut.
Beste Flexbox-Ressource. Ich benutze diese Seite oft als Referenz – vielen Dank!_
Ich habe in letzter Zeit mit
flex-wrapexperimentiert und festgestellt, dass Safari es (weder auf dem Desktop noch auf Mobilgeräten) nicht unterstützt, obwohl es dies vorgibt, d.h.Modernizr.flexwrapist wahr. Ich habe einen Fehlerbericht bei Modernizr eingereicht. Ich wollte die Nachricht verbreiten, da es in der Folgezeit, in der Firefox es zuvor nicht unterstützt hatte, einige Verwirrung um diese Eigenschaft zu geben scheint.es scheint, dass viele Eigenschaften von Safari nicht unterstützt werden: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
etwas so Wichtiges und Notwendiges wie wrap macht es für mich zu einem No-Go (aber ich bin ein Neuling)
außerdem denke ich, dass, so großartig es auch ist [und CC weiß, wie sehr ich ihn liebe], die Kombination von Alt und Neu immer noch ein weiterer Hack ist, den Flexbox eigentlich eliminieren sollte
und dafür habe ich keine Zeit!
Dieser Artikel ist einer derjenigen, die ich jetzt unzählige Male gelesen habe. Ich bin kurz davor, ihn in- und auswendig zu kennen ^_________^
Großartiger Beitrag! Es ist eine Referenz.
Hallo,
Ich versuche ein einfaches Layout zu erstellen. Könnte mir jemand dabei helfen? Ich habe einen Code geschrieben, als ich den Artikel gelesen habe.
Möchte das haben
Versuchen Sie, dies zu öffnen (ich möchte es so anzeigen)
Aber jetzt ist Block Nummer vier in die Mitte und unter Block Nummer zwei (ganzes Layout) verschoben. Ich möchte ihn auf der rechten Seite von Block Nummer zwei haben, aber unter Block Nummer drei.
(ich muss es entfernen, weil die Nachricht falsch gerendert wurde)
Vielen Dank für den Artikel! Ich werde ihn in einem neuen Projekt implementieren. :D
Falls jemand versucht, ein Grid-Layout mit Flex zu erstellen, fand ich dies hilfreich, um Elemente in der letzten Zeile auszurichten: http://codepen.io/dalgard/pen/Dbnus
Ich liebe dieses Update! Traurig, dass wir noch ein paar Jahre davon entfernt sind, dies ohne Fallback-Unterstützung zu implementieren. :(
Ich habe einen Flexbox-Container.
Innerhalb dieses Containers habe ich zwei Elemente. Einen Inhaltsbereich und einen Footer. Die Verwendung von "space-between" auf dem Container klebt den Footer an den unteren Rand des Browserfensters und den Inhaltsbereich an den oberen Rand des Browserfensters.
Ich möchte, dass der Footer eine feste Höhe von 52px hat und der Inhaltsbereich automatisch den Rest des leeren Raums ausfüllt.
Welches CSS wird für den Inhaltsbereich benötigt, um den verbleibenden Platz relativ zum Footer auszufüllen?
Ich möchte das Browserfenster unendlich erweitern können und immer, dass mein Inhaltsbereich den leeren Raum ausfüllt, und ich möchte niemals, dass der Footer seine Größe ändert.
Jede Hilfe wäre sehr dankbar, vielen Dank!
Ich habe es herausgefunden. Hier ist die Lösung, die ich gefunden habe
Ich habe eine Idee für HTML als Präsentationsformat mit Flexbox begonnen.
http://ionlyseespots.github.io/ambient-design/index.html
Hallo
Kann mir jemand ein Tutorial oder eine Demo zur Verwendung von Iframes innerhalb eines Flexbox-Containers zeigen? Ich habe es versucht und es funktioniert nicht, das Seitenverhältnis beizubehalten, und der übliche Padding-Trick scheint nicht zu funktionieren. Alternativ, gibt es eine einfache Lösung, die Sie mir hier geben könnten?
Vielen Dank
Richard C
Ich glaube, es gibt keinen besseren Ort im Web, um mit Flexbox zu beginnen.
Vielen Dank für Ihre Arbeit.
Nachdem ich Ihren großartigen Artikel über die Verwendung von Flexbox gelesen hatte, stieß ich auf diesen Artikel, der besagt, dass Flexbox nicht für das gesamte Seitenlayout verwendet werden sollte.
Irgendwelche Kommentare dazu, wie gültig der obige Artikel ist. Wenn er gültig ist, gibt es eine Möglichkeit, Flexbox weiterhin für das Seitenlayout zu verwenden, ohne die Leistung zu beeinträchtigen?
Danke.
Ich stimme dem Artikel einigermaßen zu. Sowohl Flexbox als auch Grid-Layout haben ihre Vor- und Nachteile. Flexbox eignet sich besser für dynamische Inhalte (denken Sie an die Anzeige einer zufälligen Anzahl von Bildern beliebiger Größe), während das Grid-Layout für bekannte Inhaltsbereiche vorzuziehen ist. Beide können sich an die Bildschirmgröße anpassen, sind aber für unterschiedliche Anwendungen optimiert.
Das mobile-first 3-Spalten-Layout funktioniert nicht, wenn man einen Absatz zu den Aside-Elementen hinzufügt. Ich habe festgestellt, dass jedes Beispiel, bei dem Flexbox für das gesamte Layout verwendet wird, Inhalte in diesen Boxen weglässt. Flexbox scheint für Layouts ohne viel Hacking nicht nützlich zu sein.
Der Initialwert von 'flex-basis' ist 'main-size', und wenn er in der Kurzschrift-Eigenschaft 'flex' weggelassen wird, ist sein Wert '0%'.
http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis
Das habe ich auch gerade gelesen, aber als ich damit in Chrome herumgebastelt habe, funktionierte nur Auto!
Die Spezifikation besagt, dass
flex: autoflex: 1 1 main-sizeist, zu unterscheiden vonflex: 1 1 auto. Derzeit unterstützen nur Firefox 34+ 'main-size'.https://developer.mozilla.org/en-US/docs/CSS/flex-basis
Dies wird derzeit diskutiert, wie es in der großen roten Box steht. Wir suchen derzeit aktiv nach Feedback zu diesem Thema, also lassen Sie uns bitte wissen, wenn es welches gibt!
Dies ist eine ziemlich gute Kurzanleitung. Nur ein paar Dinge, die mir beim Überfliegen aufgefallen sind
Es ist nicht sehr klar, wie "order" tatsächlich funktioniert. "order: 3" bedeutet nicht "setze es an die dritte Position", sondern "setze es nach allen Elementen mit 'order' kleiner als 3 und vor allen Elementen mit 'order' größer als 3".
Wir (die Flexbox-Spezifikationseditoren) empfehlen dringend, die Langformen von 'flex' nicht zu verwenden, es sei denn, Sie möchten wirklich, wirklich Flex-Einstellungen von einer anderen Stilregel kaskadieren. Daher würde ich vorschlagen, die Verwendung von 'flex-grow/shrink/basis' hier irgendwie zu unterbinden (oder, noch besser, es wegzulassen/in einem erweiterten Abschnitt zu behandeln). Die Kurzform setzt die Dinge auf geeignete Weise zurück und führt daher zu weniger Kaskadenfehlern. Bitte verwenden Sie die Kurzform!
Ich neige dazu, Flex-"Order" als z-index für Fluss-Elemente zu betrachten. Vielleicht hilft das auch anderen, es so zu visualisieren.
Super Beitrag. Vielen Dank, Chris!
Frage: Warum haben Sie
(Gilt für: übergeordnetes Flex-Container-Element)nur neben flex-flow?Derzeit gibt es einen lähmenden Fehler in Firefox, der jede nicht-triviale Implementierung von Flex unmöglich macht. Das Verschachteln einiger Flex-Container führt dazu, dass Firefox nicht mehr reagiert. https://bugzilla.mozilla.org/show_bug.cgi?id=1082780
Auch auf dem iPad gibt es viele Bugs, so dass es derzeit ziemlich unbrauchbar ist.
Vielen Dank für den Artikel, er hat mir sehr geholfen, meine LESS-Implementierung und mein Bower-Paket auf den neuesten Stand zu bringen!
(Kostenlos nutzbar unter https://github.com/philipperutten/css3-box oder über http://bower.io/search/?q=css3%20less%20layout).
Hallo, ich suche nach einer Möglichkeit, ein Vollbildmenü für meine Website mit Flexbox zu erstellen, mit einem Header oben und dem Rest des Platzes mit nur 6 großen responsiven Schaltflächen. Ich habe viele Dinge ausprobiert und viele Websites überprüft. Ich würde jede Hilfe schätzen. Vielen Dank im Voraus.
Dieser Artikel ist einer der besten Code-Tutorials, die ich je gesehen habe. Hut ab, dass Sie sich die Zeit genommen haben, dies so super intuitiv zu gestalten.
Das wird jetzt eine erstaunliche Funktion sein. Leider scheint sie sich noch in ihrer revolutionären Kindheit zu befinden, und ich glaube nicht, dass mein Arbeitgeber glücklich wäre, wenn ich versuchen würde, dies auf unseren Websites zu implementieren.
Sean Fiorritto (richtige Schreibweise?) hat ein großartiges Video (und ein Buch) über Flexbox namens "Sketching with Flexbox" erstellt, falls jemand daran interessiert ist. Der Link zur Videolektion: http://www.sketchingwithcss.com/flexbox/ und ein Tutorial mit fünf Lektionen: http://www.sketchingwithcss.com/flexbox-tutorial/
Viel Spaß!
Ich fragte mich also, gibt es eine gute Möglichkeit, die Kindelemente des Flex-Grids nicht automatisch über die gesamte Breite der Seite zu spannen? Jedes Mal nur Breiten anzugeben, ist nicht sehr effektiv. Niemand sollte jedem Element ein
width: 1px;hinzufügen müssen, wenn es sich richtig verhalten soll.Danke
Viel Liebe an Flexbox, das mir gerade mein Wochenende gerettet hat. Ich musste gerade eine ganze Seite neu erstellen, die früher eine HTML-Tabelle zur Darstellung einer Matrix verwendete. Nachdem sich die Anforderungen geändert hatten, merkte ich, dass ich keine Tabelle mehr verwenden konnte, da jede "Spalte" eine beliebige Anzahl von "Zeilen" haben musste. Mit anderen Worten, ich musste vom zeilenorientierten zum spaltenorientierten Format wechseln. Also verwendete ich Flexbox, um die Spalten von links nach rechts (Zeile) anzuordnen, und dann jedes Kind in jeder Zeile von oben nach unten (Spalte) anzuordnen. Aber dann musste ich jede Zeile in umgekehrter Reihenfolge neu ordnen, was Flexbox auch einfach machte: Verwenden Sie entweder die Eigenschaft "order" oder setzen Sie die Richtung auf "column-reverse". Fertig. Voila. Das JS, das ich geschrieben habe, um dies zu erreichen, ist jetzt halb so groß, und das CSS wird auch kleiner. Woo-hoo!!!!!
Danke Chris! Ich habe ein Flexbox-Regelsatz-Konfigurationsdings / Spickzettel zum schnellen Kopieren und Einfügen erstellt, basierend auf deinem Artikel. Ich habe es oft für meine eigenen Projekte verwendet, könnte auch für andere nützlich sein. http://apps.workflower.fi/css-cheats/?name=flexbox (auch auf github, falls jemand forken/verbessern/wasauchimmer möchte https://github.com/sakamies/css-cheats)
Großartige Arbeit, Mann..... das hat mich zu dieser kleinen CSS-Bibliothek inspiriert
http://hictech.github.io/cssPlusWebsite/
Wer hat die Möglichkeit, nur für die meisten modernen Browser zu designen? Sagen Sie mir Bescheid, wenn Sie es wieder auf IE9 schieben können.
Ihr erstes Beispiel unter diesem Link (http://codepen.io/HugoGiraudel/pen/LklCv) funktioniert in IE 11 nicht. IE scheint -webkit-flex-flow nicht zu mögen. Das Hinzufügen von flex-wrap:wrap; flex-direction: row; oder einfach flex-flow: row wrap; funktioniert jedoch.
Hey Leute, brauche Hilfe hier. Ich schreibe CSS für Bildschirme mit 1440er Auflösung. Habe einen Container und 3 Spalten darin. Habe dieses Tutorial verwendet und es hat in FF und Chrome super funktioniert, aber in Opera nicht. Spalte 1 und 2 sind komplett getrennt und die 3. Spalte ist unter der 1. Nur um zu erwähnen, dass ich neu hier bin (ich meine Webdesign). Hier ist der Code
@media screen and (max-width: 1440px) {
.wrap{width:910px; margin:0 auto;}
#about {width: 900px;}
#container
{
overflow:hidden;
margin:0 auto;
margin-top:70px;
width:880px;
padding: 0;
justify-content:space-between;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
padding-right:5px;
padding-left:5px;
}
Zunächst einmal brauchen Sie keine Floats. Das ist der ganze Sinn von Flexboxen. Sie müssen also keine Floats verwenden. Versuchen Sie, die Float-Deklarationen zu entfernen und noch etwas herumzuspielen….
Beachten Sie auch, dass jeder Satz von Flex-Items einen Flex-Container benötigt. Es ist nicht lächerlich, so etwas zu sehen wie
Das Verschachteln von Flexboxen ist der Weg, um browserübergreifende Konsistenz zu gewährleisten, aber es kann sehr schnell sehr verwirrend werden. Besonders, wenn man 8 Ebenen tief kommt.
Sie fehlen wahrscheinlich auch VIELE Vendor-Präfixe, um es in allen Browsern richtig zum Laufen zu bringen.
Sie könnten zum Beispiel einen Blick auf die Klassen werfen, die ich in meinen Projekten verwende, um zu sehen, was Ihnen fehlt
Wenn Sie die Möglichkeit haben, Autoprefixer zu verwenden, könnte dies bei der Anbieter-Präfixierung sehr hilfreich sein.
https://github.com/postcss/autoprefixer
Ich habe das Navigationslayout oben genommen und es in den Header des Header-, Aside-, Main-, Aside-, Footer-Layouts eingefügt.
Was ich tun möchte, ist, die Navigation/den Header zu fixieren und ihm die Breite der Seite zu geben, wobei die anderen Elemente unter dem Header in ihrer Position bleiben.
Hier ist mein Stift
http://codepen.io/anon/pen/dPVEJd
Hilft das? Ich habe Ihr HTML5 in das Ambient-Framework eingefügt.
http://codepen.io/ionlyseespots/pen/pvaPwq
Es ist großartig, dass Sie HTML, CSS und das Ergebnis angegeben haben, aber ich habe Ihres genau verwendet und es ist auf meinem Laptop in Ordnung, aber auf meinem Android-Handy sind der Header, Main, Aside1, Aside2 und Footer alle auf derselben Zeile (sowohl Hoch- als auch Querformat). Ich finde einen Unterschied zwischen dem Ändern der Größe meines Laptop-Monitors und der tatsächlichen Anzeige auf anderen Geräten.
Ich kann es möglicherweise als Problem in Ambient protokollieren.
Hallo zusammen,
Ich habe an diesem Layout gearbeitet, das ich in modernen Firefox- und IE-Browsern perfekt zum Laufen gebracht habe, aber es funktioniert nicht wie erwartet in Chrome und Safari (was mich zu der Annahme führt, dass ich die Flexbox nicht richtig implementiere).
Jeder Rat wäre sehr willkommen.... Ich habe alle möglichen Logiken ausprobiert, einschließlich Flexbox in einer Flexbox, um dies zum Laufen zu bringen.... vielleicht ist es eine Einschränkung der Art und Weise, wie Flexbox in Webkit-Browsern implementiert wird oder umgekehrt.
Ich habe die HTML-Datei hier gepostet: http://www.datagnosis.com/test_layout.html
In Safari und Chrome passen die Inhalte nicht perfekt in das Browserfenster, und das Footer-Div-Tag ist überhaupt nicht sichtbar.
Ich habe bemerkt, dass beim Deklarieren der Flex-Eigenschaft für das Elternelement, das einige Elemente enthält (z. B. ul ist flex, li sind Flex-Items (sie sind inline oder inline-block)), wenn ich für ein Listenelement margin-right:auto festlege, alle anderen Elemente an den Rand des Elternelement-Containers verschoben werden?
Danke, wie immer, für einen sehr informativen Beitrag. Er hat mein Verständnis für die Verwendung des Flexbox-Modells wirklich beschleunigt.
Eines der schwierigsten Dinge, die ich mir vorstellen konnte, waren die Eigenschaften flex-grow, flex-shrink und flex-basis. Nicht so sehr das Konzept, was sie waren, sondern wie sich die tatsächlichen Werte auswirkten.
Meine grundlegende Annahme war zunächst, dass, wenn ich die flex-basis auf eine statische Größe, sagen wir 200px, und flex-grow von Item X auf "2" und die anderen Items in diesem Container auf "1" setze, die Breite von Item X genau das 2-fache der Breite der anderen wäre. Dies war nicht der Fall. Es war immer größer als das 2-fache.
Nachdem ich die angewandten Zahlen genauer betrachtet hatte, bemerkte ich als Erstes, dass flex-grow/flex-shrink ein Verhältnis dieser Werte unter allen Kindern in dieser Flexbox für diese spezifische Eigenschaft ist. Die Grow- und Shrink-Werte haben nichts miteinander zu tun.
Wie im obigen Beispiel wäre das Verhältnis 2:1 für die Breite von Element X zum flex-basis-Wert. Aber der Teil, der mir entging und dazu führte, dass die tatsächlichen Breitenwerte diesem Verhältnis nicht folgten, ist, dass das Verhältnis auf dem Betrag basiert, um den die Container über die Basisbreite hinaus gewachsen sind (oder unter die Basisbreite für flex-shrink).
Das heißt, der Schlüssel ist, dass, wenn Sie die Basisbreite von jeder Elementbreite subtrahieren, dann die verbleibende Breite dem Verhältnis folgt.
Wenn Sie die Eigenschaft `flex-basis` nicht manuell festlegen, ist der Standardwert "0%" und das Verhältnis entspricht eher dem, was Sie erwarten würden. Es gibt jedoch immer noch eine Mindestbreite für diese Elemente, die in die oben beschriebene Verhältnisberechnung einfließt.
Hoffentlich wird das Verhältnis, da Flexbox verwendet wird, nicht genau korrekt sein müssen und das Layout wird trotzdem gut aussehen und funktionieren. Das ist doch der ganze Sinn von Flexbox, oder?
Ich wollte diese zusätzlichen Informationen nur mit denen teilen, die verstehen möchten, woher die Zahlen kommen, wenn sie nicht so herauskommen, wie man es sich zunächst vorgestellt hat.
Ich habe dieses Problem und es ist sooo verwirrend!
Warnung! Die Beschreibung von justify-content / align-items ist falsch. Das Verhalten der letzten beiden ändert sich je nach flex-direction. Der Artikel sagt, es sollte unabhängig sein. "Dies definiert die Ausrichtung entlang der Hauptachse." Nein! Wenn flex-direction = column, werden die Elemente entlang der Querachse ausgerichtet. Um Elemente entlang der Hauptachse auszurichten, müssen Sie stattdessen align-items ändern.
Wenn Sie die Flex-Richtung ändern, ändern Sie die Hauptachse. So denke ich jedenfalls darüber. Flex-Richtung
Hier: „Versuchen wir etwas anderes. Stellen Sie sich vor, wir haben eine rechtsbündige Navigation ganz oben auf unserer Website, aber wir möchten, dass sie auf mittelgroßen Bildschirmen zentriert und auf kleinen Geräten einspaltig ist. Ganz einfach.“
Die Navigation funktioniert nicht in Chrome 41.0.2272.101 m
Ich habe gerade ein Projekt mit über tausend Produkten in Dutzenden von Kategorien/Unterkategorien geerbt. Die Ausrichtung war völlig durcheinander. Ich habe es gerade behoben, indem ich ZWEI Flexbox-Elemente in CSS hinzugefügt habe.
Diese Seite rockt!
Ich habe diesen Code in der freien Wildbahn gesehen, aber es scheint eine schlechte Idee zu sein.
Können Sie mir helfen zu verstehen, warum das schlecht ist oder nicht.
Danke
Es ist nicht wirklich "schlecht" an sich, es ist nur browserübergreifend für IE. Es ist hässlicher Code, die meisten Leute verwenden einen Post-CSS-Prozessor wie Autoprefixer.
Ich bin neu bei Flexbox und möchte meine Neulingsverwirrung sicherlich nicht verbreiten, aber ich habe ein paar Dinge bemerkt
* Bezüglich dieses Bildes – http://www.w3.org/TR/css3-flexbox/images/rel-vs-abs-flex.svg. Zuerst dachte ich, das wäre super hilfreich. Als ich jedoch nachschaute, wo es in der W3-Spezifikation verwendet wird, wird überhaupt nicht über die Verwendung von "auto" als Wert für flex-basis gesprochen (nur als Wert für die "flex"-Kurzform), es ist nur aus irgendeinem Grund im Bild vorhanden – http://www.w3.org/TR/css3-flexbox/#flex-property
* Dann fand ich diesen Abschnitt der Spezifikation, und es sieht so aus, als ob die Verwendung von "auto" als Wert für flex-basis in der Diskussion ist – http://www.w3.org/TR/css3-flexbox/#flex-basis-property
Fragen
* Sollten wir die Verwendung von "flex-basis:auto" vorerst vermeiden? Und wenn ja, sollte eine Anmerkung zu diesem Bild hinzugefügt werden?
* Habe ich Recht, wenn ich denke, dass die W3-Spezifikation an diesen Stellen etwas verwirrend/unorganisiert ist? Ist es wert, dass ich jemandem einen Kommentar/eine E-Mail schicke?
Zuletzt: Sehr, sehr dankbar für diesen Beitrag. Danke!
Ich mache das meistens so
flex: 0 0 auto; oder flex: 0 0 25%; oder flex: 0 0 10em;
Ich denke, es ist einfacher, einfach die Kurzschrift-Eigenschaft zu verwenden und mit den Werten zu spielen.
Ursprünglich bedeutete „auto“ „content“ oder natürliche Größe. Jetzt bedeutet „auto“, sich die height/width-Eigenschaft anzusehen, und ein neuer Wert „content“ wurde hinzugefügt. Chrome behandelt „auto“ immer noch wie „content“. Firefox und IE tun dies nicht.
„auto“ ist also nur nützlich, wenn Sie eine Höhe oder Breite festgelegt haben, was ziemlich nutzlos ist, da Sie diesen Wert einfach als „flex-basis“ verwenden könnten.
Warum haben Sie die Klassen hinzugefügt?
<
header class = "header"> Header </ header>
Jetzt nicht schreiben (html5).
richtig schreiben ist so notwendig.
<
header> Header </ header>
Ich habe versucht, ALLE Klassen zu entfernen, aber die Seite ist kaputt. Ich verstehe es nicht.
Diese CSS-Dateien sind wie vorgefertigte UI-Bootstrap-Komponenten oder Angular selbst. Sie funktionieren sofort. Die Entwicklung von Webseiten wird jetzt kinderleicht, da die meisten gängigen Aufgaben vom Framework übernommen werden. Ich liebe es, danke!
Was mich stört, ist, wenn Sie entweder flex-direction: row; oder flex-direction: column; verwenden. Es bestimmt, welche Eigenschaft Sie verwenden, um Objekte horizontal zu zentrieren.
Vielleicht verstehe ich die Logik einfach nicht.
http://codepen.io/trilm/pen/aOoGVz
Ich denke, align-items und justify-content wurden im geteilten Beispiel verwechselt. Außerdem fehlt dem Container-Artikel eine Höhe, was dazu führt, dass die Anwendung von align-items und justify-content in diesem speziellen Fall dasselbe verwirrt.
Hier ist ein Beispiel, das Ihnen hoffentlich helfen könnte, dies zu klären
Siehe das Pen RPmwdz von Andy Maleh (@AndyMaleh) auf CodePen.
Ein weiterer großartiger Artikel!
Mit dieser Seite als Anleitung und Referenz habe ich eine Web-App-basierte Login-Vorlage erstellt, die wie eine Telefon-App aussieht. Es ist hauptsächlich eine Übung im Spaltenlayout für Flex; es half mir, ein viel besseres Verständnis der Flex-Eigenschaften zu erlangen, und ich dachte, jemand anderes könnte es sich ansehen, um zu lernen.
Hier ist das Ergebnis: https://jsfiddle.net/Serk0413/y6ugdxgx/10/embedded/result/ (komplett mit "Hamburger"-Nav)
Hier ist der Fiddle (sorry, kein Pen): https://jsfiddle.net/Serk0413/y6ugdxgx/
Es verwendet eine vollständige Mischung aus CSS-Flex-Eigenschaften, einschließlich einer Flex-Spalte mit verschachtelten Zeilen und verschachteltem traditionellem CSS (keine Floats!)
Danke für einen weiteren großartigen Artikel, Chris!!
Danke für den Beitrag. Sehr interessant. Ich benutze den Hamburger aus Ihrem Fiddle. Gibt es eine bestimmte Zuschreibung, die Sie wünschen?
Ich stelle fest, dass die 3-Spalten-Demo am Ende nicht funktioniert, und sollte mehr Inhalt in den Seitenleisten sein als das eine gezeigte Wort, dann dehnen sich die Spalten auf 100% Breite aus und zerstören das Layout.
Die Breite der seitlichen Spalten muss festgelegt werden.
z.B.
Danke für den Fix PaulOB!
Es dauerte eine Weile, bis ich daran dachte, in den Kommentaren nachzusehen... :/
Ich mag das Konzept von Flexbox wirklich, aber da ich IE9 unterstützen muss, suche ich nach einer Möglichkeit, dies mit einem eleganten Fallback zu tun. Haben Sie Vorschläge für einen eleganten Fallback oder ist es besser, es für .no-flexbox (mit Modernizr) einfach "traditionell" zu gestalten?
Ein totaler Neuling, was Flexbox angeht, aber ich habe mich etwas gefragt. Ist es möglich, in einer Liste mit mehreren Zeilen die erste Zeile "space-around" und die anderen Zeilen danach linksbündig auszurichten? Bei meiner Liste von Elementen mag ich es nicht wirklich, wenn ein oder zwei Elemente in die nächste Zeile umbrochen werden, sie "space-around" anwenden und in der Mitte landen, das bringt einen irgendwie dazu, den Überblick zu verlieren, wenn man die Liste durchgeht (ergibt das Sinn?). Es ist keine große Sache, ich habe mich nur gefragt, ob es eine Möglichkeit gibt, die letzte Zeile oder so etwas anzugeben. Tolles Tutorial übrigens! Vielen Dank im Voraus.
Bitte posten Sie Ihren Code und verlinken Sie darauf.
Hier ist ein sehr einfaches Flexbox-Beispiel; sehen Sie, ob es hilft. Fühlen Sie sich frei, zu forken, erneut zu posten und Fragen zu stellen.
http://codepen.io/colnago/pen/LVpoGK
Wenn man die Flex-Kurzform in Safari 7 (7.1.6) (
-webkit-flex) ohne Angabe des dritten Parameters (-webkit-flex-basis) verwendet, berechnet Safari den Wert0px, und das Umbrechen über-webkit-flex-wrapfunktioniert nicht. Damit Safari über Flexbox umbrechen kann, muss-webkit-flex-basisautosein (was Safaris Standardwert ist). Wenn Sie also die Kurzform verwenden und keine anfängliche Größe für Ihr Flex-Item wünschen, setzen Sie den dritten (oder den zweiten Parameter, wenn Sie shrink weglassen) auf 'auto' (z.B.-webkit-flex: 1 auto;oder-webkit-flex: 1 0 auto;).Sie können dieses Verhalten in diesem Codepen überprüfen: http://codepen.io/mdix/pen/pJNrmM
Guter Artikel, ich habe ihn gerade auf Twitter geteilt. Ich mag es wirklich, wie Sie ihn formatiert haben, die anderen Artikel über die Flexbox sind im Vergleich zu Ihrem Müll.
Das ist super hilfreich. Vielen Dank, mein Herr.
Benutzerdefiniertes Flexbox-Grid mit Bootstrap-Mixins (SASS)
https://www.ukietech.com/blog/programming/custom-flexbox-grid-using-bootstrap-mixins-sass/
@Alex: vielleicht etwas spät, aber das ist meine Lösung und sie funktioniert ziemlich gut.
Erstellen Sie eine Reihe zusätzlicher Blöcke, die dieselbe Größe wie Ihre anderen Blöcke haben, aber mit height=0, um mindestens 1 Zeile Ihres Bildschirms (oder eines beliebigen Bildschirms) auszufüllen. Da height=0, werden Sie sie nicht sehen, aber sie nehmen trotzdem Platz in der x-Richtung ein. Da Sie eine ganze Zeile ausfüllen könnten, sehen Sie die ungerade Ausrichtung in der letzten Zeile nicht, selbst wenn sie vorhanden ist. Die Ausrichtung, die Sie sehen, ist in der vorletzten Zeile. Siehe die Lösung unter https://jsfiddle.net/h0Lww6mk/3/
Es ist erwähnenswert, dass Internet Explorer Probleme hat, wenn Sie gemischte Einheiten verwenden. Ich verwende Flexbox oft mit Margins und Calc, also könnte ich so etwas verwenden wie
Dies funktioniert einwandfrei mit Safari, Firefox und Chrome, aber nicht mit Internet Explorer. Ich schätze, es ist ein Rundungsfehler, und es wird nicht alle Auflösungen betreffen, aber eine Kombination aus Bildschirmbreite und Elementbreite kann manchmal bedeuten, dass Sie nur zwei Spalten in einer Zeile anstelle von drei erhalten. Um dies zu umgehen, verwende ich
Dies berücksichtigt den prozentualen Unterschied in den Rändern. Es sieht nicht ganz so sauber aus wie in den anderen Browsern, aber es löst das Problem und ist nicht zu kompliziert.
Nachdem ich diesen Beitrag in den letzten zwei Monaten zum 100. Mal als Referenz verwendet habe, fühle ich mich verpflichtet zu sagen, dass dieses Ding unglaublich nützlich ist. Ich bin dankbar, dass Sie es gepostet haben.
Für den Fall, dass jemand Probleme hat, es in Firefox für das 2. Beispiel (Tomatenhintergrund) zum Laufen zu bringen
Legen Sie die Flex-Elemente in einen eigenen Container ohne andere Elemente.
Fügen Sie * flex-flow: row wrap; * zu .flex-container hinzu
Ich hoffe, das hilft.
Wow, dieser Artikel ist das coolste Material über Flexbox.
Leute, jetzt brauche ich Hilfe dabei
http://stackoverflow.com/q/32229436/2396907
Bitte teilen!
Vielen Dank für das Tutorial. Ich habe es befolgt, als ich etwas aktualisierte, das ich zuvor für ein Projekt eines Freundes gemacht hatte, bin aber auf Schwierigkeiten gestoßen. Die drei Elemente (der Container des Twitter-Widgets, der Container des Cbox und der Inhalt des Ccentre), die ich aktualisieren wollte, um Flex wie im Tutorial zu verwenden, haben nicht funktioniert. Es sieht so aus, als ob das Ccentre die Ursache sein könnte. Irgendwelche Ideen? Hier ist es auf Codepen: http://codepen.io/seasalt/pen/GppzmG
Hallo. Ich bin auf diese interessante StackOverflow-Frage bezüglich
justify-content: flex-startundmargin: autoauf einem Container gestoßen. Ich kenne die Antwort nicht und frage mich, ob es dafür eine Lösung gibt.Ich denke, für "align-content" sollte der Container bereits durch einige Elemente oder in einer festen Höhe gestützt worden sein. Dies kann dem Leser im Voraus mitgeteilt werden.
Chris, können Sie uns ein Beispiel für kleine und große Layouts geben? Ich verstehe die Notiz über die beste Verwendung von Flexbox vs. Grid nicht vollständig.
Vielen Dank für den Artikel! Ich habe eine Menge gelernt. Eine Frage habe ich jedoch: Der Hinweis, den Sie im Hintergrundbereich eingefügt haben: „Hinweis: Das Flexbox-Layout eignet sich am besten für die Komponenten einer Anwendung und für kleine Layouts, während das Grid-Layout für größere Layouts gedacht ist.“ verlinkt auf einen Artikel, der über ein Jahr alt ist und einen Hinweis enthält, dass er im Fluss ist. Gibt es Neuigkeiten zu diesem Artikel? Ich würde die beiden gerne parallel lesen und besser verstehen, in welchen Situationen welcher am besten geeignet wäre.
Nochmals vielen Dank! Machen Sie weiter so!
(Oder, korrekterweise…)
Damit Flexbox gut mit iPhone/iPad funktioniert, fügen Sie den folgenden Metatag hinzu…
<meta name="viewport" content="width=device-width">
Prost!
Das 2. Beispiel funktioniert gut ohne Flexbox, mit "display: inline-block". Weniger Code und es funktioniert sogar mit alten Browsern. Siehe: http://codepen.io/anon/pen/VvbzbP?editors=110
Versuchen Sie, den
.navigation aeine Hintergrundfarbe hinzuzufügen, und Sie werden sehen, dass sie nicht identisch sind. Die Verwendung voninline-blockmacht Sie von der Standardnutzung des Browsers für zusätzlichen Platz links und rechts von Inline-li-Elementen abhängig. Diese Darstellung kann durch das Floaten derli-Elemente behoben werden, aberflexboxist eine schönere (modernere) Art, diesen Effekt zu erzielen.http://bennettfeely.com/flexplorer/
Bestellstandard: 0
Ich habe herausgefunden, dass
align-contentnur für die Querachse gilt. In diesem Fall ist das vertikaler Raum. Ich glaube nicht, dass es eine Möglichkeit gibt, das, was ich zu tun versuche, mit Flexbox zu erreichen.Etwas, das dem nahe kommt, was Sie versuchen, ist dies
div.block {
flex-basis: 20rem;
flex-grow: 1;
}
div.block p {
width: 20rem;
}
Wenn Sie
space-betweenverwenden, scheint es auch linksbündig auszurichtenJuhu, lasst uns CSS noch komplizierter machen! W3 stopft immer mehr Zeug in HTML und CSS, vergisst aber, dass die Leute sich damit beschäftigen und arbeiten wollen und nicht jeden Tag neue Tags/Definitionen lernen.
Die vorgeschlagenen Änderungen an CSS wurden bereits vor Jahren initiiert, zusammen mit der Einführung von HTML5. Die meisten davon sind tatsächlich Ergänzungen zu CSS und HTML, und nicht Änderungen. Der Grund war, dass bestimmte Seitenlayouts, die man heutzutage sieht, mit der alten Spezifikation sehr schwierig umzusetzen waren. Daher wurden diese neuen Tags hinzugefügt, um die Webstruktur/das Layout zu vereinfachen, und nicht um es zu verkomplizieren.
Nehmen Sie zum Beispiel Flexbox. Früher war es sehr schwer, eine dynamisch skalierende Website zu erstellen. Nur Prozentsätze zu verwenden, um die Abschnitte zu skalieren, reichte einfach nicht aus. Eine Verbesserung war die Einführung der calc()-Funktion, die Prozentsätze und statische Einheiten zusammen verwenden konnte, aber selbst damit war der Code immer noch schwer zu lesen. Flexbox war eine großartige Ergänzung, die sehr einfach zu bedienen ist, sobald Sie diesen Artikel gelesen haben.
Und tatsächlich können Sie immer noch CSS2 und HTML4 verwenden, wenn Sie möchten. Niemand hält Sie auf, aber Sie verweigern sich einige großartige Tools, wenn Sie dies tun
Der Grund, warum ich gerne mit dem Web arbeite, ist, dass es sich ständig weiterentwickelt. Es gibt immer etwas Neues zu lernen.
Das Gleiche gilt für jede Technologie oder eigentlich das Leben im Allgemeinen. Ohne neue Funktionen und Möglichkeiten verkümmern wir und schöpfen unser volles Potenzial nicht aus.
Ich vermute, dass relativ wenige Menschen sich mit dem, was wir jetzt haben, zufriedengeben und einfach damit arbeiten wollen.
Das W3C ist keine einzelne Person, die Sie oder uns vernachlässigt hat. Es ist eine Organisation und eine Demokratie, die von den Menschen und Unternehmen geleitet wird, die das Web erfunden haben und es weiterhin zum Nutzen aller nutzen.
Es sollte wahrscheinlich beachtet werden, dass die W3C-Dokumente Empfehlungen, keine Anforderungen sind. Alles ist optional.
Sie wurden vielleicht von PPKs Artikel bewegt: Hört auf, das Web voranzutreiben
Ich fand diesen Gegenpunkt von Bruce Lawson aufschlussreich: Über PPKs Moratorium für neue Browserfunktionen
Beide Artikel und weitere, die am Ende von Bruce Lawsons Artikel verlinkt sind, wurden von Menschen geschrieben, die viel klüger sind als ich.
Ich hasse es, es zu sagen, aber die Frustration, die PPK und viele andere ausdrücken, erinnert mich sehr an die Frustration meiner Tochter, in die Schule zu gehen. Schließlich hat sie zu Hause schon Fernsehen, YouTube und alle Spielsachen, die sie braucht :)
Sehr schöne/hilfreiche Seite. Kleiner Fehler auf https://css-tricks.de/snippets/css/a-guide-to-flexbox/
Unter „justify-content“, Aufzählungspunkt „flex-end: Elemente werden zum Ende der Linie gepackt“… macht keinen Sinn, muss ein Tippfehler sein.
Nur zur Info, keine Antwort erforderlich.
Im ersten Beispiel fehlt das nicht präfixierte
flex-flow: row wrap;, so dass es derzeit nur in Chrome funktioniertIch mochte das alte Layout für diesen Artikel viel lieber. Die Nebeneinanderstellung der Eltern- und Kindesbeispiele erleichterte den Vergleich der Verhaltensweisen und die Auswahl des richtigen Ansatzes.
Hallo,
Ich möchte einen Link auf Bildern platzieren, die sich in einer Flexbox befinden. Bevor ich den Link platziere, funktioniert Flexbox, aber nachdem ich den Link platziere, funktioniert es nicht mehr. WARUM? Ich vermute, es ist ein Problem mit meinem HTML? Kann mir jemand ein Beispiel geben, wie man das macht?
Vielen Dank!
hier ist mein html-Code
@Louisa Sie haben Ihren CSS-Code nicht beigefügt, daher ist es unmöglich zu sagen, was falsch ist. Ich habe Ihr HTML in einen Pen eingefügt und
#page1conteneur { display: flex; }eingestellt und es funktioniert einwandfrei.Wenn Sie Hilfe wünschen, müssen Sie auch Ihren CSS-Code posten. Besser noch, posten Sie Ihre Frage und den gesamten zugehörigen Code auf einer Website wie Stack Overflow, die für Fragen und Antworten konzipiert ist
Hier ist mein Beispiel. Ich habe die Bilder durch Bilder von LoremPixel ersetzt, nur um etwas zum Anschauen zu haben. …
(Editor: diese Demo zeigte 404, sie muss gelöscht worden sein.)
Laut caniuse.com wird Flexbox in iOS8.* über das Webkit-Präfix unterstützt.
http://caniuse.com/#feat=flexbox
Laut css-tricks ist die iOS-Unterstützung für Flexbox 7.0.1+.
Ich habe gerade ein Fehler Ticket für iOS7 bekommen, wo Flex nicht funktioniert. Ist die obige Tabelle also falsch?
Dieser Guide ist meine Flex-Bibel! Ich benutze ihn fast einmal am Tag!! Vielen Dank an Sie, Chris!
Weiß jemand, ob es eine druckbare Version gibt? Eine Art Spickzettel?
Danke :)
Hallo, ich muss alle Elemente innerhalb eines Flex-Containers zueinander ausrichten. Angenommen, ich habe zwei Divs gleicher Höhe mit Flexbox erstellt und möchte nun alle Elemente innerhalb des Divs zueinander ausrichten. Ist das möglich?
Dies ist eine hervorragende Anleitung und ich habe damit in etwa einer Stunde gelernt, wie man eine Seite layoutet. Ich kann es kaum erwarten, es weiter zu testen und zu sehen, wie es in verschiedenen Szenarien funktioniert. Vielen Dank, Chris & Team!
Ich versuche, ein Rasterlayout zu ersetzen, bei dem ich display: table und table-cell verwendet habe, um Inhalte vertikal mit Flexbox auszurichten.
Mein Problem mit Flexbox ist, dass ich kein zweites Kindelement vertikal ausrichten kann. Sie können dies hier in Aktion sehen: http://codepen.io/anon/pen/BjXbrw
Egal, was ich versuche, entweder verliere ich die vertikale Zentrierung der Überschrift oder das zweite Kind wird nicht ausgerichtet. Was mache ich hier falsch?
Danke!
Wer auch immer diesen Artikel geschrieben hat, hat vergessen zu erwähnen, dass flex-shrink, wenn es auf 0 gesetzt wird, verhindert, dass das Element schrumpft und seine ursprüngliche Größe beibehält. Diese Information hätte mir 4 Stunden Arbeit ersparen können.
Mein Chef sagt, Flexbox sei dumm. Sie sagte "Schnürsenkel" oder so ähnlich sei besser, kannst du das bestätigen??
Ihr Chef scheint ziemlich gesprächig zu sein, wenn er versucht, die Effektivität von Flexbox auszubalancieren, und hat ein Wort/einen Dienst erfunden, um diese faszinierende Kritik besser zu verstärken.
Manchmal lächle ich, wenn ich diese Artikel lese (und dieser hier ist übrigens völlig in Ordnung), aber ich erinnere mich an die dunklen Zeiten, als man eine ziemlich anständige Webseite auf einem einzigen Blatt Papier codieren konnte, wohingegen es jetzt endlose Artikel braucht, um die Codierung überhaupt zu verstehen, und dann landet man mit Megabytes an Code … und es ist immer noch nur eine Seite, aber viel "hübscher" (und erfordert bis zu 1000-fache Bandbreite und Server-Speicher LOL). Und wir nennen es Fortschritt.
P.S. Es erinnert mich daran, als C++ herauskam und "Hello World!" von 4 oder 5 Zeilen Code (C) zu 4 oder 5 Seiten Code (C++) wurde. LOL Ich musste meinen PC gegen einen PC-XT tauschen, um eine Festplatte zu bekommen. ^_^
Wenn Sie "Megabytes" an Code benötigen, um eine Seite zu erstellen, machen Sie entweder etwas sehr falsch oder Sie haben viel mehr als "nur eine Seite", wie z. B. ein sehr komplexes System von Skripten oder Ähnlichem.
Können wir eine feste Navigation erstellen, während wir das Layout unserer Navigation mit Flexbox erstellen?
Bezüglich der Flex-Eigenschaft
Zu sagen, dass die 2. und 3. Parameter
<flex-shrink>und<flex-basis>optional sind, ist leicht irreführend, da es impliziert, dass<flex-grow>(der 1. Parameter) niemals optional ist. Die Wahrheit ist,<flex-grow>ist optional, solange<flex-basis>vorhanden ist (und offensichtlich, wenn der Wert "none" ist). Es ist nur erforderlich, wenn<flex-shrink>vorhanden ist.Dies ist ein fantastischer Beitrag. Es hat mir schon mehrmals geholfen.
Ich habe ein Problem, das ich nicht lösen kann. Ich kann keine einzelne Textzeile vertikal in einem Element zentrieren. Es scheint so einfach, und doch habe ich Stunden damit verschwendet, ohne Erfolg.
Wäre jemand bereit, diesen Codepen zu kommentieren? Ändern Sie die Breite unter 900px, und Sie werden sehen, was passiert.
http://codepen.io/simspace-dev/pen/mPGQdq
Danke,
Chris
Vielleicht muss ich das Symbol vertikal zum Text zentrieren und nicht umgekehrt?
Wenn Sie "display: flex; align-items: center; height: 100%" zu Ihrer .bullet-content-Klasse hinzufügen, sollte alles in Ordnung sein.
Die Höhe: 100% ist erforderlich, um Ihr
Element auf die li-Höhe zu strecken (hätte man natürlich auch mit Flexbox machen können).
Danke für den tollen Artikel!
Fantastisch!
Ich habe gerade angefangen, HTML & CSS zu lernen. Vielen Dank für die Informationen, die Sie zusammengestellt haben. Ich wünschte, es gäbe mehr "Komplette Anleitungen" wie diese. Das ist einfach genial.
Eines der Beispiele (nummerierte Tomatenboxen, die umbrochen werden) verwendet webkit-flex-flow anstelle von nur flex-flow, so dass das Beispiel nur für Webkit spezifisch wird.
Hallo Leute,
Dieser Artikel war mein "Spickzettel" für den Flexbox-Standard.
Ich bin auf einen Fehler in Firefox gestoßen, der es Elementen nicht erlaubt, Flex-Container zu sein.
Es hat EWIGKEITEN gedauert, das herauszufinden, also möchte ich dies mit anderen Leuten teilen, die vielleicht den Schmerz erleben, den ich gerade erlebt habe!
jsbin-Link, der den Fehler zeigt: https://jsbin.com/kobefo/1
bugzilla-Link: https://bugzilla.mozilla.org/show_bug.cgi?id=984869
Ich meinte zu sagen: „ein Fehler in Firefox, der es Elementen nicht erlaubt, Flex-Container zu sein.“
Hallo Otto,
Für die Kompatibilität können Sie diese URL http://caniuse.com/ ausprobieren, diese hilft Ihnen, die erforderlichen Informationen zu erhalten.
Mit freundlichen Grüßen,
AK
Sehr klar. Als Lesezeichen gespeichert!
@Alex
Ich denke, Sie können es, schauen Sie sich das Beispiel hier an
https://plnkr.co/edit/yKLl8irs6xudPHfTh1u9
Wie kann ich den Inhalt am unteren Rand des Elements ausrichten, wenn er sich in einer verschachtelten Flexbox befindet?
align-itemsundjustify-contentscheinen in diesem Fall nicht zu funktionieren.Mir ist nicht klar, ob ich zum Zeitpunkt dieses Schreibens im August 2016 noch Präfixe für Flex-Code benötigen würde. Wenn die Antwort lautet „hängt davon ab, welche Browser-Unterstützung Sie benötigen“, wüsste ich wirklich nicht oder könnte nicht genau vorhersagen, wer meine kommerzielle Seite besuchen könnte.
Sollte Präfix-Code als Schutz eingefügt werden, ODER ist es schädlich, Anbieter-Flex-Präfix-Code hinzuzufügen, wenn der besagte Anbieter in neueren Browser-Versionen volle Flex-Konformität bereitgestellt hat?
Fazit: Ist es zu diesem Zeitpunkt (8/2016) einfach eine gute Idee, Anbieter-Präfixe für Flex hinzuzufügen, und gibt es dabei mögliche Nachteile?
Sie können nützliche Einblicke (und sehr spezifische für Ihre Website und Benutzer) erhalten, indem Sie Google Analytics installieren. Mit den Statistiken, die es Ihnen liefert, können Sie die Browserverteilung der Personen sehen, die Ihre Website besuchen. Ich denke, das würde Ihnen Aufschluss darüber geben, wie viel Bedarf wirklich für die Unterstützung bestimmter Browserversionen besteht.
Ich möchte mich einfach nur bedanken. Seit ich mich im letzten Jahr mit CSS vertraut gemacht habe, habe ich diese Seite tausendmal konsultiert. Sie war einfach so hilfreich. Ich musste Ihnen ein wohlverdientes "Dankeschön" schreiben. Großartige Arbeit. Sehr geschätzt. Vielen Dank.
Don
Zustimmung! Das war leicht verständlich und extrem hilfreich für ein neues Projekt, an dem wir arbeiten.
Vielen Dank!
Dieses Tutorial ist so cool. :)
Hallo.
Hier gibt es großartige Dinge, aber ich vermisse offensichtlich einige Grundlagen von meiner Seite. Wenn es jemand erklären kann. Ich möchte aus einem letzten Beispiel (ganze Seite mit all diesen Elementen .header, .main, .nav, .aside, .footer) folgendes Ergebnis erzielen. .ASIDE2 – violetter Teil soll unter .MAIN – blauem Teil sein. Und ASIDE 1 – gelb soll immer noch daneben laufen. Kurz gesagt – lila unter blau hinzufügen und gelb erweitern.
Vielen Dank,
Igor
Vielen Dank für dieses großartige Tutorial! Die CodePen-Beispiele mussten ein wenig angepasst werden, damit sie auf meinem Firefox 48 funktionierten. Ich musste das -webkit-Präfix von -webkit-flex-flow in den Beispielen 1 und 2 entfernen.
Schön, ich habe aber eine Frage, mit diesem neuen Wissen wollte ich meine Fähigkeiten an einer Art Framework ausprobieren. Ich habe alles auf "http://tesserakt.pro/demo/repsonse" hochgeladen. Aber warum haben die beiden col-1 oben nicht die gleiche Breite wie die col-2? Sie sollten sich addieren und 50% Breite ergeben? Richtig? Das tun sie nicht, ich denke, es hat etwas mit flex-shrink und flex-grow zu tun, aber ich bin mir nicht sicher.
Ich liebe es, wie IE 10 ein Tweener ist, ahahah!
Ist es möglich, eine maximale Breite für den Container festzulegen und diesen Container dann zu zentrieren? Sobald ich meinen Container auf flex umgestellt habe, funktioniert 'margin: 0 auto' nicht mehr, um den Container zu zentrieren.
Es ist einfach, machen Sie es einfach so
align-content: flex-start; // um den Inhalt am oberen Rand des Rasters auszurichten
justify-content: center; // um den Container horizontal zu zentrieren
Kannst du das mit absoluten Elementen machen? Bitte hilf mir
Bitte lassen Sie mich hier wissen, wenn Sie Ihr Problem gelöst haben, vielen Dank! :D
Danke, das ist wirklich hilfreich.
Fantastisch! Das war hilfreich, um die Unterstützung für Flexbox in CSE HTML Validator zu verbessern. Gute Sache.
Ich frage mich, wer dachte, dass die Implementierung von Space-Around so eine gute Idee war und warum.
Denn ich verstehe gleichen Abstand zwischen Elementen als
A|===|A|===|A|===|A
("A" ist ein bestimmter Abstand)
Stattdessen ist es
A|===|AA|===|AA|===|A
Was das Anordnen von Inhalten auf gleichmäßig verteilte Weise unmöglich macht.
Ist es in Ordnung, eine Website nur mit Flexbox zu erstellen? Oder nicht und warum?
Ich nehme an, wenn Sie davon ausgehen, dass alle Ihre Besucher einen aktuellen Browser haben, können Sie nur Flexbox verwenden. Wenn einige von ihnen immer noch IE6 verwenden und Sie ihnen ermöglichen müssen, Ihre Website zu nutzen, müssen Sie eine andere Möglichkeit zur Anzeige anbieten…
Vielen Dank für diese Anleitung. Sehr hilfreich.
Bearbeitungsvorschlag: Im Abschnitt flex-direction stimmen die visuellen Beispiele nicht mit der im CSS-Code-Snippet gezeigten Reihenfolge überein. Ich dachte aus irgendeinem Grund, dass flex-box "auf und ab" als "Reihe" und "links nach rechts" als "Spalte" behandelt.
Da alle anderen Abschnitte in der Reihenfolge mit den Code-Snippets übereinstimmen, war ich eine Weile verwirrt.
Viel Liebe, Rob.
Sorry, dass ich das HTML in meinem Kommentar oben vergessen habe. Hier ist es: http://codepen.io/localnepal/pen/vyXPmy
Die Bildabmessungen in box1 ändern sich in der Anzeige, wenn ich neuen Text in box3 eingebe, auch wenn es nicht mehr Text ist als zuvor.
Scheint, als könnte Flex-Wrap etwas flexibler sein, wenn es Einzüge und hängende Einzüge unterstützt, wie bei Absätzen.
Anwendungsfall: eine Reihe von Thumbnails mit Daten darunter, eine Flexbox pro Monat gefüllt, zum Beispiel. Beim schnellen Scrollen wäre es schön, die neuen Monate am linken Rand und "Fortsetzungszeilen" eingerückt zu sehen. Ich habe das mit Floats und seltsamen Rändern gemacht, aber ich sehe nicht, wie ich es auf Flexbox umwandeln kann.
Hallo, tolles Tutorial.
Ist es möglich, Flex zu verwenden, um ein perfektes Raster mit einigen quadratischen Kästen zu erstellen, deren Seiten doppelt so groß sind wie die anderer quadratischer Kästen? Das Raster soll nur zwei Arten von Kästen enthalten – klein und groß (mit Seiten doppelt so groß wie die des kleinen Kastens).
Ich komme aus Deutschland und deshalb ist mein Englisch nicht sehr gut.
Bitte versuchen Sie also, in einfachen Worten zu antworten :)
Ich habe den Code von der Flexbox am Anfang der Website genommen.
Aber jetzt habe ich gemerkt, dass aside 1 und aside 2 nicht neben dem Hauptteil sind.
Ich habe versucht, Codes einzufügen, die bereits in den Kommentaren stehen, aber es funktioniert nicht.
Könnte mir also bitte jemand einen Code geben, den ich in meinen Code einfügen kann?
Bis jetzt ist der Code
Siehe den Pen RKbXJX von Christian (@bplaced) auf CodePen.
@Christian
Hallo, ich bin kein Code-Profi, aber selbst ich konnte sehen, dass dein Code wie Rührei ist. Du solltest keinen Code in deinen Code kopieren/einfügen, wenn du nicht weißt, wo und was. Ich denke, du solltest mit einem sauberen HTML neu anfangen und es viel einfacher halten.
Hey, ich wollte nur sagen, dass dies meine meistbesuchte Referenzseite im Jahr 2016 war. Du zeigst Dinge, die funktionieren. Das ist wirklich alles, was es dazu zu sagen gibt. Danke!
Kann ich align-items irgendwie nur für eines von drei Elementen löschen?
@Henry Ich denke, du kannst die Standardeinstellung (oder deine Einstellung) von align-items durch align-self: … ; auf dem Flex-Element überschreiben.
Vielen Dank für die Arbeit, die du in die Erstellung dieses Dokuments gesteckt hast. Sehr geschätzt.
Ich habe diese Seite jeden Tag offen. Kann ohne sie keine richtigen Flexbox-Designs codieren. Danke Chris! Du machst mein Leben besser! Grüße aus Deutschland
Dies ist ein großartiger Artikel. Vielen Dank.
Nicht drucken und weggehen… Es werden ALLE Kommentare gedruckt! Achtung!
Warum ist flex-direction standardmäßig "row"?
Wir lesen digitale Inhalte typischerweise vertikal, daher leuchtet es mir nicht ein, warum "row" eine höhere Priorität als "column" haben sollte.
Sogar React Native hat flexDirection standardmäßig auf 'row' gesetzt, also bin ich nicht der Einzige, der der Meinung ist, dass 'column' der Standardwert für flex-direction sein sollte.
Dies macht das Styling von Web und RN problematisch, denn um die gleiche Entwicklererfahrung zu haben, muss man entweder die flex-direction von divs auf 'column' setzen oder die flexDirections von Views auf 'row'.
Dies ist das beste Flexbox-Tutorial, das ich gelesen habe. Vielen Dank für die großartige Arbeit. Die Abbildungen machen die Dinge wirklich viel einfacher. Es wäre noch besser, wenn es ein echtes Webseiten-Beispiel gäbe, das mit Flexbox erstellt wurde, wie eine vollständigere Version als das letzte Beispiel, damit wir sehen können, wie Flexbox im wirklichen Leben verwendet wird.
Dies ist eine unglaublich nützliche Anleitung. Ich habe sie in einem Codepen zusammengefasst: https://codepen.io/vlrprbttst/pen/gRYVMO
Was ist im letzten Beispiel, wenn wir die Höhe des Wrappers festlegen wollen? Wenn dies getan wird, scheinen Header/Footer und der Inhalt die Höhe gleichmäßig einzunehmen. Gibt es eine Möglichkeit, Header/Footer auf eine bestimmte Höhe zu begrenzen und den mittleren Inhalt den Rest einnehmen zu lassen?
Danke dafür! Ich fange gerade an, mit Flexbox zu experimentieren (früher hauptsächlich Spalten und nur einfaches Inline + Breiten verwendet) und das ist so unglaublich einfach. Werde es viel mehr verwenden!
Hallo Chris,
Vielen Dank für all die großartigen Informationen, sie haben mir wirklich geholfen, Flexbox zu verstehen. Während ich lernte, habe ich ein Open-Source-Flexbox-Raster zusammengestellt, das einen traditionellen 12-Spalten-Ansatz verwendet, was mir hilft, Flexbox-Attribute einfacher anzuwenden. Es heißt Eixample, und Sie können es sich ansehen unter: https://github.com/mobilejazz/Eixample
Nochmals vielen Dank für die tollen Infos,
Adam
Danke für die tolle Seite! Diese Seite ist meine erste Anlaufstelle für Flex CSS..
Könntest du etwas Text bereitstellen, der erklärt, was "cross-start", "cross-end", "cross-axis" usw. bedeuten? Ich finde das sehr verwirrend und würde mir zusätzliche Erklärungen wünschen.
Diese werden im Abschnitt „Grundlagen & Terminologie“ oben auf der Seite erklärt. Sie müssen diesen Abschnitt erweitern, um den Inhalt zu sehen.
@Alex und @AndyMaleh (Drei Jahre später und basierend nur auf dem Bild, das Alex uns zeigte) Ja, Sie können ein "perfektes" (aber warum perfekt?) Produktgitter nur mit Flex erstellen, Sie müssen nur Ihren Inhalt zu flex-start ausrichten und vorsichtig mit Ihren Rändern sein... außerdem müssen Sie auch dem Titel einen Rand zuweisen (bitte schauen Sie sich Alex' Bild an, es ist klar, dass dort alles einen Rand hat).
Hier ist meine Version eines "perfekten" Produktgitters (responsiv)
Prost!
Sehr interessanter Artikel. Ich habe ein paar Fragen, deren Beantwortung ich sehr schätzen würde. Ich war ein paar Jahre lang nicht mehr in der Frontend-Entwicklung tätig und habe mich mit Kochkunst beschäftigt, habe mich aber entschieden, wieder ins Design und die Frontend-Entwicklung einzusteigen.
Ich habe mich also ziemlich viel mit Responsive Design beschäftigt, als es noch ziemlich neu war. Im Moment versuche ich herauszufinden, wo ich anfangen soll und welche Technologien sicher zu verwenden sind. Kann ich dem ziemlich vollständigen Browser-Support für die "neue" Syntax von Flexbox vertrauen, ohne mir Sorgen um alle Fallbacks machen zu müssen?
Und was ist mit CSS Grid, sicher für die Produktion mit Fallbacks? Warum sollte ich mir überhaupt die Mühe machen, das Layout zweimal zu erstellen und meinen Code aufzublähen, wenn Fallbacks für das Layout erforderlich sind?
Vielen Dank für Ihre Zeit. Nur ein paar Tipps und Tricks ;) wären super!
Hallo. GROSSARTIGER STOFF!
Ich benutze diese Website schon eine Weile, komme immer wieder zurück, wenn ich eine Auffrischung brauche.
Meine Frage ist: Wenn ich "display: flex" auf ein Element anwende, während das Element so gestaltet ist, dass der ERSTE BUCHSTABE farbig ist, WAS bei mobilen Bildschirmen der Fall ist, weil ich "display" nur bei mittleren bis großen Bildschirmen aufrufe. Bei diesen größeren Größen bleiben die Stile des ersten Buchstabens zwar erhalten, aber die Flexbox entfernt die Stile. Warum ist das so?
Vielen Dank!
Hallo Michel,
Die Flexbox-Spezifikation verbietet die Anwendung von
:first-letterinnerhalb von Flex-Containern, siehe den Abschnitt „Flex Containers“. Dies liegt daran, dass:first-letterund:first-linesehr schwierig zu implementieren sind und es keinen ausreichend starken Grund dafür zu geben schien, sie zum Laufen zu bringen.Sie sollten
:first-letterjedoch direkt auf ein Flex-Element anwenden können, dasdisplay: blockist.Wenn das nicht ausreicht, reichen Sie ein Problem gegen die CSSWG ein mit einer Erklärung, was Sie versuchen zu tun und warum dies funktionieren muss; die Einschränkung kann aufgehoben werden, wenn es einen guten Grund gibt, dass es funktioniert. (Allerdings ist die Implementierung von
:first-letterund:first-linein den Layout-Engines ziemlich schmerzhaft, so dass es selbst wenn die Einschränkung in der Spezifikation aufgehoben wird, eine Weile dauern könnte, bis jemand bereit ist, sie zu implementieren.)Vielen Dank dafür. Ich kann Ihnen nicht sagen, wie oft ich diese fantastische Referenz verwendet habe.
Hallo! Ich bin SeonghoonBaek, ich bin Frontend-Entwickler in Korea :)
Kann ich diesen Artikel in meinem Blog veröffentlichen? Ich möchte diesen Artikel ins Koreanische übersetzen, weil dieser Artikel vielen Frontend-Entwicklern in Korea :) und meinen Kollegen helfen würde
Absolut. Wenn das Teilen dieses Beitrags in anderen Sprachen anderen hilft, dann tun Sie das bitte unbedingt. :)
Ich habe diesen Artikel wirklich geliebt, Chris, er hat mir wirklich die Augen für das Ausmaß und die Coolness von Flexbox geöffnet – ich bin wirklich überzeugt.
Wow. Ich fange gerade an, Flexbox zu verwenden, da ich einige Lehrmaterialien aktualisiere, die ich vor 22 Jahren (ja, html2!) von html 4 auf html 5 begonnen habe. Ich war überwältigt von der Umstellung von Frames auf Div. Aber Ihre Seite vermittelt die Dinge in einer Sprache, die ein nicht-programmierender Lehrer verwenden kann, um auf etwas anderes als Frames zu aktualisieren. Vielen Dank für eine so gut gemachte Seite. Jetzt werde ich mir die Hände schmutzig machen und das Gehirn überladen. Meine Hauptframe-Seite hat 11 Frames.
Diese Seite ist episch, es ist viel einfacher, Antworten auf allgemeine Flexbox-Fragen zu finden, als sich durch andere Seiten zu wühlen. (: Ich besuche sie tatsächlich so oft, dass ich heutzutage nur "flex" in meine Chrome-Omnibar eingeben muss und dies ist der erste Vorschlag. Vielen Dank, Chris..
Fantastischer Artikel, danke :)
Könnten Sie flex-shrink bitte etwas besser erklären? Woher weiß der Browser, ob es "notwendig" ist, ein Element zu verkleinern? Wie verkleinert er ein Element? Was bedeuten höhere Zahlen im Vergleich zu niedrigeren Zahlen? Was passiert, wenn flex-shrink und flex-grow beide auf demselben Element oder auf zwei Geschwisterelementen angegeben sind?
Artikel aus der gegenteiligen Perspektive: https://css-tricks.de/flex-grow-is-weird/
flex-shrink bezieht sich darauf, wie stark ein Element "sich selbst aufgibt", wenn nicht genug Platz vorhanden ist. Im folgenden Beispiel nimmt item1 dreimal weniger Platz ein als item2, wenn der übergeordnete div kleiner ist als die Breite beider
flex-basis-Werte (600px).Beispiel
Andrew: Diese beiden Aussagen scheinen sich zu widersprechen. Basierend auf der ersten Aussage (die meinem Verständnis entspricht), würde item1 nicht 3x weniger Platz "einnehmen", sondern 3x mehr Platz "aufgeben" – mit anderen Worten, es würde 3x schneller schrumpfen als item2.
Wenn also die verfügbare Breite 500px wäre, würde item1 statt einer gleichmäßigen Reduzierung um 50px um 75px schrumpfen (auf 225px Breite) und item2 nur um 25px (auf 275px Breite). Habe ich das richtig verstanden?
Übrigens hat die Eigenschaft
align-contentauch den Wertspace-evenly. Ich habe diesen Artikel vor ein paar Jahren gelesen, immer noch relevant :)Tolles Tutorial. Hier ist ein fantastisches Video, das die gleichen Konzepte auf animierte Weise zusammenfasst.
Schaut es euch unbedingt an, wenn euch das obige Tutorial gefallen hat.
Warum ist es so, dass beim Ändern der Größe des Browserfensters, das Flexbox-Elemente anzeigt (auf dieser Seite zum Beispiel), die Seitenposition nach dem Ändern der Größe anders ist als das, was ich vorher angesehen habe?
Wenn ich zum Beispiel das Kommentarfeld betrachte und die Fenstergröße ändere, kann ich das Kommentarfeld nicht mehr sehen. Kann das in Flexbox behoben werden?
Ola.. Ich bin neugierig auf die Verwendung von
margin: auto;bei Kindern im Vergleich zu dem etwas ausführlicherenjustify-content: space-around; align-items: center;bei den Eltern. Ich habe damit auf Codepen herumgespielt (siehe hier) und festgestellt, dass ich dasselbe Layout auf beiden Wegen erreichen konnte.Ich wurde schon zu oft von "100 Möglichkeiten, X zu tun" bei JS gebissen, wobei jede ihre eigenen Besonderheiten hat. Deshalb bin ich jetzt skeptisch, welche dieser beiden Optionen die sicherste wäre, sowohl für die aktuelle Verwendung als auch für zukünftige Projekte?
Hallo, Herr Coyier.
Ich habe eine Flex von Bildern und es störte mich, dass, wenn weniger Bilder in der letzten Zeile waren, sie gestreckt wurden, um den verfügbaren Platz auszufüllen (was logisch war wegen
flex-grow:1).Unter https://stackoverflow.com/questions/34928565/properly-sizing-and-aligning-the-flex-items-on-the-last-row?noredirect=1 fand ich dies
Ich habe es an den Bildern ausprobiert und festgestellt, dass flex-grow:1000 die magische Zahl für meine Verwendung war.
Ich weiß, ich sollte froh sein, dass es funktioniert hat, aber ich möchte unbedingt wissen, WARUM 1000 meine magische Zahl ist! Es funktioniert auch innerhalb der Media-Queries – egal ob 5, 4, 3 oder 1 Bilder in der ersten Zeile sind, die letzte Zeile sieht gut aus. WARUM, OH WARUM? :).
Danke fürs Lesen
Cath
Gibt es einen guten Grund, keine Regel für „* {display: flex;}“ zu haben? Da ich Flex-Layout immer exklusiver nutze, frage ich mich, wie anwendbar es wäre, Flex zum Standard-Display für alle Elemente zu machen und diejenigen zu ändern, die es nicht benötigen.
Wie funktionieren flex-grow und flex-shrink? Mir ist das nicht klar. Wenn ich flex-grow auf Flex-Items anwende, wird flex-wrap nicht berücksichtigt. Warum?
Im Abschnitt
align-itemssteht geschriebenAber sollte es nicht
min-height/max-heightsein oder vielleicht sowohl Höhe als auch Breite einschließen, da es vonflex-directionabhängt?Hallo,
Mir hat dein Tutorial gefallen. Wie kann ich jedoch die Flexboxen innerhalb des Containers unterschiedlich groß machen? Ich verstehe, dass flex-grow die Größe steuert, aber wenn ich den Containern 1 und 2 die Werte 2 und 6 gebe, ignoriert der dritte Container, was auch immer flex-control ihm gibt.
Was passiert mit gerechtfertigtem Text (text-align-Stil) mit Zeilenumbrüchen innerhalb eines Div- oder Span-Flex-Containers?
Wenn dieser Text einen (oder \n in der JSON-Datei) enthält und dynamisch mit innerHTML (aus einer JSON-Datei) von JavaScript in das Div-Element des HTML angezeigt wird, ist der Text, obwohl das CSS oder JavaScript das Div-Element gestylt hat, nur links ausgerichtet (die gerechtfertigte Formatierung ist deaktiviert).
Das heißt, gibt es eine Möglichkeit, gerechtfertigten Text in einem Flexbox-Container beizubehalten, wenn der Inhalt dynamisch mit JavaScript geladen wird?
Vielen Dank
Chris, 2 Dinge (natürlich zusammenhängend). 1. Ich habe keine Erwähnung von place-content (Kurzform für align-content & justify-content laut Mozilla – https://developer.mozilla.org/en-US/docs/Web/CSS/place-content) gesehen. Nun, natürlich ist mir klar, dass dies neuer sein könnte als bei deiner ersten Veröffentlichung (irgendwann um April 2013, soweit ich das beurteilen konnte), aber ich habe auch oben (unter deiner Autorenzeile) bemerkt, dass "Zuletzt aktualisiert: 22. August 2018" steht. 2) Auch von Mozilla (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content), und scheint auf align-content, justify-content und align-items zuzutreffen, nichts ist als 'default' markiert, aber sie listen ein Schlüsselwort 'normal' auf und sagen: "Die Elemente werden in ihrer Standardposition gepackt, als ob kein justify-content-Wert festgelegt wäre." Dies würde mich zu der Annahme verleiten (obwohl es nicht explizit angegeben ist), dass 'normal' das neue 'default' ist, im Gegensatz zu den 'defaults', die du als 'stretch' & 'flex-start' aufgeführt hast (was meines Wissens dasselbe wie "normal" ist)
Ups, ich schätze, du kannst den zweiten Teil des vorhergehenden Kommentars ignorieren. Ich habe gerade den Arbeitsentwurf gelesen und obwohl 'normal' der "Standard" ist, variiert das Verhalten von normal je nach Kontext, was in den meisten Fällen so ist, wie du es beschreibst. Du könntest 'place-content' jedoch immer noch zu diesem Artikel hinzufügen. :) Es wäre schön, wenn Mozilla eine kleine Erklärung bezüglich 'normal' und des Kontexts, der zu 'stretch' und 'flex-start'-Verhalten führt, enthalten würde.
Warum hat im Falle einer Breite von 800px das Hauptelement 0px flex-basis in .main { flex: 2 0px; }? Warum nicht als Standard belassen oder auf auto setzen?
Was wurde seit der Aktualisierung des Artikels geändert?
Hey Glen! Die Bilder sind die bemerkenswerteste Änderung (Stil und bessere Visualisierungen des Eigenschaftsverhaltens), aber es gibt ein paar kleinere Anpassungen, um aktualisierten Spezifikationen Rechnung zu tragen, einschließlich Links zu diesen Spezifikationen selbst. :)
Wow! Völlig umwerfend! Ich lasse diese Seite dauerhaft geöffnet. Ich habe einen Neustart gemacht und als ich die Seite sah, habe ich dreimal hingesehen. Die Beispiele wurden alle zu Cartoons! Ich dachte, ich würde spinnen. SEHR SEHR COOL! Ich liebe es!
Toller Artikel! Schönes Layout und Farben. Und ich liebe deine (Illustrator?)-Illustrationen – wie hast du sie gemacht?
align-items scheint jetzt standardmäßig auf stretch zu stehen
Wie erstelle ich ein Box-Layout aus drei divs? Zwei kleine links und ein großes rechts in einer Zeile, die jeweils 50 % Breite verteilt sind. Und auf Tablet-Geräten geht ein kleines Feld mit voller Breite nach unten, und darüber haben wir jetzt zwei gleiche Boxen.
Vielen Dank im Voraus;
Danke Chris, fantastischer Artikel über Flexbox. Habe einen Flexbox-Spielplatz basierend auf diesem Artikel entwickelt, um es besser zu lernen, schau es dir an auf https://poonia.github.io/flexbox/
Ein schöner und umfassender Artikel. Ich habe eine Frage, die außerhalb des Themas Flexbox liegt, und zwar: Wie haben Sie diese Diagramme in Ihrem Artikel gezeichnet? Welche Software haben Sie verwendet, um diese Diagramme zu erstellen?
Hey Max! Es ist möglich, dass der übergeordnete Container (.casfakjds) eine Höhe erhalten muss. Zum Beispiel hier ein Container, der den gesamten vertikalen Platz des Viewports mit dem gleichen CSS in deinem Beispiel einnimmt: https://codepen.io/geoffgraham/pen/WmRXaz
Toller Leitfaden. Dies ist mein Standard-Leitfaden, wenn ich mit Flexbox arbeite.
Vielen Dank für Ihre Mühe. Sehr gut erklärt, sehr gut gestaltet.
Die Eigenschaft
gapund ihre Langschreibweisenrow-gap&column-gapkönnen verwendet werden, um den Abstand zwischen gerechtfertigten Flex-Kindern festzulegen. Im Gegensatz zumarginunterstützt dies das Zusammenführen.https://github.com/w3c/csswg-drafts/issues/1696
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
Leider derzeit nur in Firefox verfügbar…
Wunderbarer Beitrag @Chris Coyer…können Sie bitte einen Beitrag über „wie man CSS-Spezifikationen für Anfänger liest“ erstellen. Ich finde es schwierig zu verstehen.
Es scheint, dass diesem Leitfaden die Eigenschaft justify-items fehlt
Diese Eigenschaft gilt nicht für Flexbox. MDN
Ich denke, die Tatsache, dass justify-items nicht für Flexbox-Layouts gilt, sollte auch in diesem Artikel enthalten sein :)
Wie kann ich die Flex-Richtung nur für eine bestimmte Anzahl der Kinder einstellen? Bitte beachten Sie, dass ich in diesem Setup kein HTML ändern kann, nur CSS!
Ich sehe, der Artikel wurde aktualisiert. Was ist mit diesem Satz: „Das Schlüsselwort content bedeutet „Größe basierend auf dem Inhalt des Elements“ – dieses Schlüsselwort wird noch nicht gut unterstützt, daher ist es schwierig zu testen und noch schwieriger zu wissen, was seine Brüder max-content, min-content und fit-content tun.“
Ist das immer noch der Fall??
Gutes Tutorial, obwohl ich denke, dass Sie diesen Code besprechen und erläutern sollten
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Da es im CodePen etwas verwirrend war – vielleicht sogar ein Link, um weitere Informationen zu erhalten. Nicht einmal eine Erwähnung davon.
Ansonsten ein großartiges Tutorial.
Super Beitrag!
Ich glaube, es könnte verbessert werden, indem zu Beginn eine kurze Definition für "Hauptachse" und "Kreuzachse" hinzugefügt wird.
Hallo Chris,
Vielen Dank für diesen tollen Beitrag. Ich beziehe mich ständig darauf.
In den letzten Tagen habe ich versucht, Flexbox für eine spezielle Anforderung zu verwenden, die ich habe. Die meisten Beiträge über Flexbox gehen davon aus, dass die Kinderelemente bequem in das Flexbox-Container-Element passen, aber in meinem Fall können die Kinderelemente potenziell eine Größe annehmen, die größer ist als die Flexbox. Hier ist ein Beispiel
Beschreibung des Problems: Mein obiger .container ist kleiner als die kombinierte Höhe der drei Elemente, die er enthält, und so kümmert sich die overflow-Eigenschaft um den Teil von .item3, der außerhalb des Containers verbleibt. Das ist in Ordnung.
In Fällen, in denen jedes der Elemente .item1/.item2/.item3 vorhanden ist, funktioniert justify-content: flex-start gut. Aber in meinem Fall gibt es Zeiten, in denen .item2 oder .item3 beide/individuell fehlen könnten. Nehmen wir also an, wenn .item2 & .item3 beide fehlen, zeigt .item1, basierend auf meinem obigen CSS, oben/am Anfang meines .containers an – was nicht wirklich wünschenswert ist, denn wenn .item1 das einzige Element im Container ist, möchte ich, dass es sich so verhält, als ob der Container justify-content: center hätte.
Anforderung: Mit anderen Worten, wenn die Gesamthöhe meiner Kinderelemente größer ist als die Höhe des Elter-Containers, möchte ich das Verhalten 'flex-start', aber wenn die Gesamthöhe der Kinderelemente kleiner ist als die Höhe des Elter-Containers, dann möchte ich das 'center'-Verhalten der Flexbox.
Die Werte space-between, space-around, space-evenly für justify-content könnten gut funktionieren, wenn die Höhe des .container größer ist als die Gesamthöhe der Kinder, aber in meinem Beispiel, wenn jedes der .item1/.item2/.item3 innerhalb des .container vorhanden ist, bleiben .item1 und .item3 teilweise außerhalb des .container, was nicht wünschenswert ist.
Ich bin mir sicher, dass es eine JavaScript-Möglichkeit gibt, dies zu tun, aber ich frage mich, ob Sie ein paar CSS-Tricks auf Lager haben, die dies auf eine einfache, elegante CSS-Weise erreichen. Außerdem gibt es viele dieser .container-Divs auf meiner Seite, und das ist der andere Grund, warum ich CSS bevorzuge.
Vielen Dank im Voraus für Ihre Hilfe.
Hallo Chris – danke, dass Sie dieses Tutorial veröffentlicht haben – es ist meine Anlaufstelle, wenn ich eine Flexbox-Auffrischung brauche! Ich habe kürzlich ein Open-Source-Tool zum Erkunden von Flexbox erstellt, von dem ich hoffe, dass es Ihnen und Ihren Lesern nützlich sein wird https://app.peterrcook.com/flexplorer/ Nochmals vielen Dank für CSS-Tricks und Codepen :)
Ich verstehe nicht, was es bedeutet "right to left in ltr; left to right in rtl". Bitte erklären Sie es noch einmal.
ltr bedeutet "left to right" System, wie zum Beispiel Englisch.
rtl bedeutet "right to left" System, wie zum Beispiel Arabisch
Betreff Flex-Eigenschaft
„Es wird empfohlen, diese Kurzschreibweise zu verwenden, anstatt die einzelnen Eigenschaften festzulegen. Die Kurzschreibweise setzt die anderen Werte intelligent.“
Ich bin mir nicht sicher, ob ich dem unbedingt zustimme; zum Beispiel, wenn ich 'flex: 30%;' auf 3 von 3 flex-items definiere, werden die flex-grow und flex-shrink Werte beide auf 1 gesetzt, und meine flex-items wachsen auf 1/3 statt 30% wie gewünscht. 'flex-basis: 30%;' funktioniert in diesem Fall viel besser für mich.
Im Interesse der vollständigen Kontrolle bevorzuge ich daher immer noch die Verwendung der separaten Eigenschaften anstelle der Kurzschreibweise.
Diese Seite ist großartig! Ich habe unzählige Male darauf zurückgegriffen. Froh, dass sie bei Google-Suchen ganz oben erscheint, so finde ich sie immer. Brillant gemacht, um den Unterschied zwischen dem Container und den Elementen zu zeigen. Schöne Illustrationen. Die einzige Seite, die man braucht, wenn man CSS flext. Vielen Dank!
Toller Hinweis! Als Lesezeichen gespeichert. Ich möchte wissen, wie man Flexbox verwendet, um den verbleibenden Leerraum mit Elementen zu füllen. Angenommen, ich habe 10 Bilder, und in einer Reihe werden 3 Elemente angezeigt, wenn die Bildgrößen nicht gleich sind, gibt es in jeder Reihe Leerräume. Wie löst man das?
ERSTAUNLICH!! Vielen Dank für diese Ressource!
Chris,
Ausgezeichneter Artikel wirklich. Ich begann sofort mit dem Codieren und erzielte fantastische Ergebnisse.
Ich wünschte nur (vielleicht zu viel verlangt), ich könnte PDF-Dateien all dieser großartigen Artikel zu diesem Thema herunterladen.
Auf jeden Fall schätze ich Ihre Bemühungen.
Sie können die Seite ausdrucken und „Als PDF speichern“ als Drucker auswählen.
Schöner Artikel, gibt es eine Möglichkeit, den Inhalt eines Elements unterschiedlich zu gestalten, wenn es natürlich umbrochen wird, z.B. den Inhalt des zweiten Elements rechts auszurichten und es links auszurichten, wenn das gesamte Element in die nächste Zeile umbrochen wird.
Danke,
Chandy
Gute Tuts…leicht zu verstehen. Danke.
Ich beziehe mich oft auf diesen Leitfaden, aber ich wünschte, er wäre tatsächlich der "vollständige" Leitfaden. Ich stoße immer wieder auf Flexbox-Probleme und habe noch keinen definitiven Leitfaden gefunden.
Insbesondere möchte ich oft eine vollständige Fenster-UI für eine Single-Page-App erstellen. Dabei möchte ich verschiedene verschachtelte Bereiche haben, in denen sich der Inhalt an den Bereich anpasst, ihn aber nicht überläuft (overflow: auto).
Ich stelle jedoch fest, dass ich, unabhängig vom Projekt, immer und ausnahmslos scheitere, es zum Laufen zu bringen, und es ist nur ein zufälliges Raten, welches Element ein "min-height: 0" oder ein "height: 100%" oder etwas anderes benötigt. Es hilft auch nicht, dass Safari anders reagiert als Firefox und Chrome, so dass ich, wenn ich es auf FF+Chrome zum Laufen bringe, dann mit Safari kämpfen und hoffen muss, dass ich FF+Chrome nicht kaputt mache. Ich habe die letzten 24 Arbeitsstunden damit verbracht, diesen Kampf zu kämpfen und zu verlieren, und kein "vollständiger" Leitfaden behandelt die tatsächlichen Regeln, die die Dinge funktionieren lassen. Es gibt nur viel Suchen und dann Raten, welche zufällige Antwort im Internet die richtige sein könnte.
Hallo CSS-Tricks,
Vielen Dank für diese wunderschöne Website.
Zur Spalte „Eigenschaften für die Kinder (Flex-Items)“: Ich sehe auf MDN, dass es die Eigenschaft „justify-self“ mit den gleichen Werten wie „align-self“ gibt.
Ist diese CSS-Eigenschaft Teil von Flex-Layouts?
– https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
Wenn ja, wird sie diesem Artikel hinzugefügt?
Vielen Dank im Voraus für Ihre Antwort :)
Im Flexbox-Layout wird diese Eigenschaft ignoriert
@Amel Das wird hier gut erklärt: https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties#33856609
Zunächst einmal vielen Dank für diesen Beitrag – ich beziehe mich oft darauf – aber ich bin auf ein Problem gestoßen und konnte keine Lösung finden. Ich baue eine Website für einen Künstler. Einige seiner Werke sind horizontal und andere vertikal. Ich erstelle für jedes Werk eine Seite, auf der der obere „Landeplatz“ die Seite füllen und eine Überschrift/Unterüberschrift, das Kunstwerk und eine Navigation enthalten soll (wenn der Benutzer nach unten scrollt, gibt es weitere Informationen über das Werk, wie man es kauft, usw.)…
Es funktioniert ziemlich gut für horizontale Stücke, aber vertikale machen mir WIRKLICH Probleme. Der Wrapper-Div des Kunstwerks skaliert nicht herunter und alles wird riesig und/oder läuft über. Ich habe Ihre Artikel über flex-shrink und flex-grow gelesen, aber ich scheine es nicht herauszufinden. Bitte helfen Sie, wenn Sie können!
Ich habe einen Entwurf für den gewünschten Effekt erstellt … hier zu finden: https://www.dropbox.com/s/xdeltebgmzz23wy/flexbox-question.jpg?dl=0
Beachte, dass CSS-Spalten keine Auswirkung auf einen Flex-Container haben.
bitte erkläre das. wie?
danke.
In https://css-tricks.de/snippets/css/a-guide-to-flexbox/#justify-content erwähnen Sie Folgendes
flex-start (Standard): Elemente werden zum Beginn der flex-direction hin gepackt.
start: Elemente werden zum Beginn der writing-mode direction hin gepackt.
Das ist technisch nicht korrekt. Flex-start respektiert auch die Schreibrichtung.
Versuche, dem auf den Grund zu gehen. Dieser Teil, den du geschrieben hast, scheint wahr zu sein: „flex-start respektiert auch die Schreibrichtung.“
Was es gerade sagt
–
flex-start: Elemente werden zum Beginn der flex-direction hin gepackt.–
start: Elemente werden zum Beginn der writing-mode direction hin gepackt.Was MDN sagt
–
flex-start: Die kreuz-start-Ränder der Flex-Elemente liegen bündig am kreuz-start-Rand der Linie an.–
start: Die Elemente werden bündig zueinander zum Startrand des Ausrichtungscontainers in der entsprechenden Achse gepackt.Es scheint, als gäbe es einen Unterschied, aber ich verstehe nicht, welcher.
Kleiner Spielplatz zum Testen https://codepen.io/chriscoyier/pen/OJgVRPL
Hallo!
Um zu verstehen, wie diese Eigenschaften funktionieren, schlage ich vor, ein praktisches Beispiel zu zeigen.
Zum Beispiel hilft mir nur das Schreiben von
<
div style=”width:200px; display: flex; flex-wrap: wrap;”>,
nicht dabei, den Mechanismus von „flex-wrap: wrap“ zu verstehen, weil ich das geschrieben habe, aber nach dem Setzen dieser Eigenschaft keinen Effekt sehe.
Es ist gut, diese Eigenschaften zu zeigen, aber es wäre besser, wenn Sie praktische Beispiele hinzufügen würden.
Mit freundlichen Grüßen.
Gibt es eine Eigenschaft, um alle Elemente gleich breit zu machen?
Das ist ein Lebensretter! Alles andere, was ich gelesen habe, funktioniert entweder nicht oder ist komplizierter, als ich es machen möchte. Vielen Dank.
Ich würde vorschlagen zu erwähnen, dass im Falle von
flex-direction: column,justify-contentzum vertikalen Ausrichter undalign-contentzum horizontalen wird.Dies ist der beste CSS-Leitfaden, den ich je gesehen habe. Klar, prägnant und rundum perfekt. Er hat das Styling von Webseiten revolutioniert.
Ich komme immer wieder auf diese Seite zurück. Sie ist perfekt!
Ich mag Flex, weil es responsiv umbrechen kann, während ein fester Abstand zwischen den einzelnen Elementen beibehalten wird. Das funktioniert nur OHNE Ihren
margin: auto-Stil. Ich glaube, das Grid-Layout bietet standardmäßig den adaptiven Abstand, den Sie bevorzugen, ebenfalls OHNE Ihrenmargin: auto-Stil.Ich kehre immer wieder zu dieser Seite zurück, liebe deine Erklärungen. So viele CSS-Seiten werden heutzutage kopiert und eingefügt.
Danke, dafür, ich habe gerade angefangen, Flexbox zu lernen, und das ist ein großartiger Einstieg.
Derzeit unterstützt Chrome last-baseline nur in Blink (https://chromestatus.com/feature/5093352798683136)
Warum haben Sie diese "Ausklapp"-Abschnitte? Es macht es mühsam, mit Strg+F etwas auf der Seite zu finden.
Vielen Dank!!! Das Beste, was ich über Display Flex gesehen habe. Vielen Dank
Ich genieße die Erklärung wirklich, sie ist sehr klar, aber kann ich bitte die Offline-Version davon bekommen?
Na klar! Es ist ganz oben auf der Seite als herunterladbares PDF verfügbar.
Danke für diesen Kurs