Flexbox: Ein CSS -Layout -Kraftpaket

Flexbox oder das CSS Flexible Box-Layout-Modul vereinfacht ein dimensionales Layout-arrangende Elemente in einer Zeile oder Spalte. Das Anwenden von display: flex (oder display: inline-flex) auf einen Container verwandelt seine direkten Kinder in Flexelemente, die von den Flexbox -Regeln geregelt werden. Diese Stromlinien codieren für verschiedene UI -Muster wie flexible Formen oder vertikale Zentrierung. W?hlen Sie Flexbox über Gitter, wenn Sie Elemente horizontal ausrichten oder vertikal, aber nicht beides; Gitter zeichnet sich bei zweidimensionalen Anordnungen (Zeilen und S?ulen) aus.

Flexbox -Grundlagen

Vor dem CSS-Gitter regierte Flexbox für einachsige Layouts (Zeilen oder Spalten mit flex-direction: row oder column). Einfach hinzuzufügen display: flex zu einem Container initiiert einen Flex -Formatierungskontext für seine Kinder. Hinweis: ?ltere Browser ben?tigen m?glicherweise Anbieter -Pr?fixe wie -webkit-flex oder -moz-flex.

Das Bild unten zeigt, wie direkte Kinder eines Flex -Beh?lters zu Flexartikeln werden. Dies k?nnen Elemente oder nicht leere Textknoten sein. Ohne weiteres Styling haben Elemente die gleiche H?he (basierend auf dem h?chsten), horizontal (oder vertikal in vertikalen Schreibmodi) stapeln und keinen Abstand haben. Sie k?nnten sogar den Beh?lter überlaufen.

Praktische Flexbox -Anwendungen

Flexbox vereinfacht komplexe Layouts. Betrachten Sie diese Beispiele:

1. Medienobjektkomponente:

Ein herk?mmliches Medienobjekt (Bild neben Text) zuvor erforderliche Floats und ClearFix -Hacks. Flexbox eliminiert dies:

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

Dieser pr?gnante Code erzielt das gleiche Ergebnis und passt dynamisch an Bildgr??en an.

2. Flexible Formkomponenten:

Erstellen reaktionsschneller Formulare ist mit Flexbox mühelos. Die Eigenschaft flex Shorthand (kombiniert flex-grow, flex-shrink und flex-basis) steuert die Elementgr??e:

div { display: flex; }
input[type="text"], button { border: 0; font: inherit; }
input[type="text"] { flex: 1 0 auto; } /* Expands to fill space */
button { background: #003; color: whitesmoke; display: block; text-align: center; flex: 0 0 150px; } /* Fixed width */

Die Eingabe erweitert, w?hrend die Taste ein festes 150px bleibt. Denken Sie daran, dass die Werte flex-grow und flex-shrink proportional sind.

3. Vertikale Zentrierung:

vertikal zentrierender Inhalt wird mit align-items: center:

.flex-container { display: flex; align-items: center; }

Diese Zentren flexken Artikel in ihrem Beh?lter.

4. Gitterartige Layouts:

W?hrend das Gitter ideal für Gitter ist, kann Flexbox mit flex-wrap: wrap und flex-basis und flex-grow:

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

FlexBox vs. Gitter: Ausw?hlen des richtigen Werkzeugs

Gitter für zweidimensionale Layouts verwenden; Verwenden Sie Flexbox für einachsige Layouts, die horizontale oder vertikale Ausrichtung ben?tigen, jedoch nicht beides. Oft kombinieren Projekte beide Techniken für optimale Ergebnisse.

Weiteres Lernen: CSS-Tricks '"Eine vollst?ndige Anleitung zu Flexbox" und andere Ressourcen für einen tieferen Eintauchen in Flexbox-Funktionen konsultieren.

Das obige ist der detaillierte Inhalt vonErstellen Sie flexible Layouts mit Flexbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!