Using Flexbox: Mixing Old and New for the Best Browser Support

Flexbox ist ziemlich genial und sicherlich Teil der Zukunft des Layouts. Die Syntax hat sich in den letzten Jahren ziemlich verändert, daher die „alte“ und „neue“ Syntax. Aber wenn wir die alten, neuen und dazwischen liegenden Syntaxen miteinander verweben, können wir eine gute Browserunterstützung erzielen. Besonders für einen einfachen und wahrscheinlich den häufigsten Anwendungsfall: gitterkontrollierte Grids

Das HTML

Ein semantisch bedeutungsloser Wrapper umgibt die drei Hauptbereiche und legt den Flexbox-Kontext fest. Jeder der Bereiche ist semantisch markiert und wird in Spalten umgewandelt.

<div class="page-wrap">
  
  <section class="main-content" role="main">
    Main content: first in source order
  </section>
  
  <nav class="main-nav" role="navigation">
    Links
  </nav>
  
  <aside class="main-sidebar" role="complementary">
    Sidebar
  </aside>
    
</div>

Das Endergebnis sieht so aus

Flexbox-Kontext

Wir müssen den Container für unsere Spalten zu einem Flexbox-Display-Kontext machen. Alle direkten Kinder dieses Elements werden dadurch zu Flex-Items. Es spielt keine Rolle, was sie vorher waren, sie sind jetzt Flex-Items.

Sofort müssen wir die alten, neuen und dazwischen liegenden Syntaxen miteinander verweben. **Die Reihenfolge ist hier wichtig**. Da die `display`-Eigenschaft selbst nicht präfixiert ist, müssen wir sicherstellen, dass wir neuere Syntaxen nicht mit älteren überschreiben, für Browser, die beides noch (und wahrscheinlich immer) unterstützen.

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

Breitenkontrolle der Spalten

Unser Ziel hier ist ein 20% / 60% / 20% Gitter.

Schritt 1 ist, unseren Hauptinhalt auf 60% festzulegen.
Schritt 2 ist, die äußeren Seitenleisten so einzustellen, dass sie den verbleibenden Platz gleichmäßig ausfüllen.

Auch hier müssen wir alte, neue und dazwischen liegende Syntaxen miteinander verweben.

.main-content {
  width: 60%;
}
.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

In der neuen Syntax ist das Festlegen der Breite für die Seitenleisten nicht notwendig, da sie die verbleibenden 40% gleichmäßig ausfüllen und somit beide 20% ergeben. Aber ich habe festgestellt, dass das Nicht-Festlegen zu einer gewissen Breitenkollision mit den alten Syntaxen führte.

Spalten-Neuanordnung

Wir möchten, dass der Hauptinhalt visuell in der Mitte erscheint, aber im Quellcode an erster Stelle steht. Einfach in Flexbox, aber natürlich müssen wir die neue, alte und dazwischen liegende Syntax verweben.

.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
}
.main-sidebar {
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
}

Browser-Unterstützung

Wenn Sie all dieses Weben betreiben, können Sie

• Chrome jeder
• Firefox jeder
• Safari jeder
• Opera 12.1+
• IE 10+
• iOS jeder
• Android jeder

Der größte limitierende Faktor ist natürlich IE, aber ansonsten ist es ziemlich gut. Wenn Sie eine mobil-spezifische Version einer Website erstellen, sind Sie in noch besserer Verfassung. Wenn jemand es auf einem Windows Phone testen kann, lassen Sie es mich wissen.

Firefox 19- ist etwas fehlerhaft und Sie müssen aufpassen. Zum Beispiel konnte ich in dieser Demo keine Möglichkeit finden, die Seitenleisten tatsächlich auf 20% zu erzwingen. Sie werden einfach auf die Breite des darin enthaltenen Inhalts reduziert, was etwas willkürlich ist, da es sich um Text handelt. Ich brauchte auch -moz-box-flex: 1; für den Hauptinhalt (60%), sonst würde er so breit werden wie der breiteste Absatz, als hätte er white-space: nowrap, was mir einfach unerklärlich ist.

Demo

Auf CodePen:

Check out this Pen!

Benötigen Sie mehr Details zu Flexbox?

Schauen Sie sich unseren vollständigen Leitfaden an.