Erstellen Sie flexible Layouts mit Flexbox

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:

vereinfacht

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

anpassungsfähige Layouts erzeugen

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