Flexibles Boxlayout
Mit dem Aufkommen der CSS Flexible Box wurden viele der Albträume 1 von Webdesignern gelöst. Eine der hackigsten ist die vertikale Ausrichtung. Jetzt ist es auch in unbekannten Höhen möglich .
"Zwei Jahrzehnte Layout-Hacks gehen zu Ende. Vielleicht nicht morgen, aber bald und für den Rest unseres Lebens."
- CSS- Legende Eric Meyer auf der W3Conf 2013
Flexible Box (oder kurz Flexbox) ist ein neues Layoutsystem, das speziell für Layoutzwecke entwickelt wurde. Die Spezifikation besagt :
Das Flex-Layout ähnelt oberflächlich dem Blocklayout. Es fehlen viele der komplexeren text- oder dokumentenzentrierten Eigenschaften, die im Blocklayout verwendet werden können, z. B. Gleitkommazahlen und Spalten. Im Gegenzug erhält es einfache und leistungsstarke Tools zum Verteilen von Speicherplatz und zum Ausrichten von Inhalten auf eine Weise, die Webanwendungen und komplexe Webseiten häufig benötigen.
Wie kann es in diesem Fall helfen? Okay, lass uns nachsehen.
Vertikal ausgerichtete Spalten
Mit Twitter Bootstrap haben wir .roweinige .col-*s. Alles, was wir tun müssen, ist, die gewünschte .row2 als Flex-Container- Box anzuzeigen und dann alle Flex-Elemente (die Spalten) vertikal nach align-itemsEigenschaften auszurichten .
BEISPIEL HIER (Bitte lesen Sie die Kommentare sorgfältig durch)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Die Ausgabe
Der farbige Bereich zeigt das Auffüllfeld der Spalten an.
Klarstellung auf align-items: center
8.3 Achsenübergreifende Ausrichtung: die align-itemsEigenschaft
Flex-Elemente können in der Querachse der aktuellen Linie des Flex-Containers ausgerichtet werden, ähnlich, justify-contentjedoch in senkrechter Richtung. align-itemsLegt die Standardausrichtung für alle Elemente des Flex-Containers fest, einschließlich anonymer Flex-Elemente .
align-items: center;
Nach dem Mittelpunktswert wird das Randfeld des Flex-Elements in der Querachse innerhalb der Linie zentriert .
Großer Alarm
Wichtiger Hinweis Nr. 1: Twitter Bootstrap gibt die Anzahl der widthSpalten in besonders kleinen Geräten nur an, wenn Sie .col-xs-#den Spalten eine der Klassen zuweisen.
Daher habe ich in dieser speziellen Demo .col-xs-*Klassen verwendet, damit Spalten im mobilen Modus ordnungsgemäß angezeigt werden, da sie widthdie Spalte explizit angeben .
Aber alternativ könnte man abschalten die Flexbox einfach Layout , indem display: flex;auf display: block;Größen in bestimmten Bildschirm. Zum Beispiel:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Oder Sie können nur bestimmte Bildschirmgrößen wie folgt angeben.vertical-align :
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
In diesem Fall würde ich mit gehen @KevinNelson ‚s Ansatz .
Wichtiger Hinweis Nr. 2: Herstellerpräfixe wurden aus Gründen der Kürze weggelassen. Die Flexbox-Syntax wurde im Laufe der Zeit geändert. Die neue geschriebene Syntax funktioniert nicht mit älteren Versionen von Webbrowsern (aber nicht so alt wie Internet Explorer 9! Flexbox wird in Internet Explorer 10 und höher unterstützt).
Dies bedeutet, dass Sie display: -webkit-boxim Produktionsmodus auch vom Hersteller vorangestellte Eigenschaften wie usw. verwenden sollten.
Wenn Sie in der Demo auf "Kompilierte Ansicht umschalten " klicken , wird die vorangestellte Version der CSS-Deklarationen angezeigt (dank Autoprefixer ).
Spalten voller Höhe mit vertikal ausgerichtetem Inhalt
Wie Sie in der vorherigen Demo sehen , sind die Spalten (die Flex-Elemente) nicht mehr so hoch wie ihr Container (die Flex-Container-Box, dh die.row Element).
Dies liegt an der Verwendung des centerWerts für die align-itemsEigenschaft. Der Standardwert ist stretchso, dass die Elemente die gesamte Höhe des übergeordneten Elements ausfüllen können.
Um dies zu beheben, können Sie auch folgende display: flex;Spalten hinzufügen :
BEISPIEL HIER ( Beachten Sie auch hier die Kommentare)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Die Ausgabe
Der farbige Bereich zeigt das Auffüllfeld der Spalten an.
Beachten Sie zu guter Letzt , dass die Demos und Codefragmente hier eine andere Idee vermitteln sollen, um einen modernen Ansatz zur Erreichung des Ziels bereitzustellen. Bitte beachten Sie den Abschnitt " Big Alert ", wenn Sie diesen Ansatz in Websites oder Anwendungen der realen Welt verwenden möchten.
Für die weitere Lektüre einschließlich der Browserunterstützung wären diese Ressourcen hilfreich:
1. Richten Sie ein Bild in einem Div vertikal mit der Reaktionshöhe aus.
2. Verwenden Sie besser eine zusätzliche Klasse, um die Standardeinstellungen von Twitter Bootstrap nicht zu ändern .row.
div, nein den Text darin, so etwas wie jsfiddle.net/corinem/Aj9H9, aber in diesem Beispiel verwende ich nicht bootstrap