Flexbox vs Twitter Bootstrap (oder ein ähnliches Framework) [geschlossen]


161

Ich habe kürzlich entdeckt, Flexboxals ich nach einer Lösung suchte, um Divs je nach höchster Höhe gleich hoch zu machen.

Ich habe die folgende Seite auf CSS-tricks.com gelesen und es hat mich überzeugt, dass dies flexboxein sehr leistungsfähiges Modul zum Lernen und Verwenden ist. Es hat mich jedoch auch darüber nachgedacht, dass Twitter Bootstrap (und ähnliche Frameworks) mit ihren Grid-Systemen die gleichen Funktionen (+ natürlich viel mehr) bieten.

Die Fragen sind nun: Was sind die Vor- und Nachteile flexbox? Gibt es etwas, das man mit Flexbox nicht machen kann, was man mit einem Framework wie Bootstrap machen kann (natürlich nur über das Grid-System)? Welches ist schneller, wenn es auf einer Website implementiert wird?

Ich vermute, wenn es nur für das Grid-System klüger ist, es nur zu verwenden flexbox, aber was ist, wenn Sie bereits ein Framework verwenden, gibt es etwas flexboxhinzuzufügen?

Gibt es Gründe, flexboxdas "Grid-System" einem Framework vorzuziehen?


5
Ich benutze Flexbox mit Bootstrap.
Aibrean

2
Schauen Sie sich Zurb's Foundation For Apps an . Es ist komplett auf Flexbox Grid System gebaut
Salem Ouerdani


1
Bootstrap 4 ist jetzt standardmäßig Flexbox! Flexbox ist ein immens leistungsfähiges Layout-Tool, das dem Grid-System und den Kernkomponenten beispiellose Flexibilität und Kontrolle bietet. Dies geht zu Lasten der Einstellung der IE9-Unterstützung, bringt jedoch erhebliche Verbesserungen beim Layout, der Ausrichtung und der Größe der Komponenten mit sich.
Nermien Barakat

5
Ich bin nicht der Meinung, dass dies als meinungsbasiert geschlossen werden sollte. Der Fragesteller sucht nach Fakten, nicht nach Meinungen. "Was sind die Vor- und Nachteile von Flexbox?" Der Fragesteller (wie ich) versucht, die Stärken und Nachteile jedes Systems zu bestimmen.
Darin Cardin

Antworten:


107

Aus mehreren Gründen ist Flexbox viel besser als Bootstrap:

  • Bootstrap verwendet Floats, um das Rastersystem zu erstellen, von dem viele sagen würden, dass es nicht für das Web gedacht ist. Flex-Box macht das Gegenteil, indem es flexibel auf die Größe und den Inhalt der Elemente reagiert. Der gleiche Unterschied wie bei der Verwendung von Pixeln gegenüber em / rem oder beim Steuern Ihrer Divs nur mithilfe von Rändern und Auffüllungen und ohne Festlegen einer vordefinierten Größe.

  • Da Bootstrap Floats verwendet, muss nach jeder Zeile ein Clearfix erstellt werden. Andernfalls werden falsch ausgerichtete Divs unterschiedlicher Höhe angezeigt. Flex-Box macht das nicht und sucht stattdessen nach dem höchsten Div im Container und hält sich an seine Höhe.

Der einzige Grund, warum ich mit Bootstrap über Flex-Box gehen würde, ist mangelnde Browser-Unterstützung (hauptsächlich IE) (bereits sterben). Und manchmal haben Sie ein anderes Verhalten als Chrome und Safari, obwohl beide dieselbe Webkit-Engine verwenden.

Bearbeiten:

Übrigens, wenn das einzige Problem, mit dem Sie konfrontiert sind, die Spalten gleicher Höhe sind, gibt es dafür einige Lösungen:

  • Sie können display: tableauf dem Elternteil und display: table-cell;auf dem Kind verwenden. Siehe So erhalten Sie die gleiche Höhe in der Anzeige: Tabellenzelle

  • Sie können die absolute Positionierung für jedes Div verwenden:
    position: absolute; top: 0; bottom: 0;

  • Es gibt auch die jquery / JS-Lösung und eine andere Lösung, an die ich mich im Moment nicht erinnern kann und die ich später hinzufügen möchte.

Bearbeiten 2:

Überprüfen Sie auch unter http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties, wie Flex-Box funktioniert.

Bearbeiten Sie 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Bearbeiten Sie 4: https://caniuse.com/#feat=flexbox


1
Vielen Dank für Ihren Kommentar. Ich konnte keine Erklärungen finden, was das "bessere" der beiden war, also hoffe ich, dass meine Frage (und Ihre und zukünftige Antworten) den Menschen bei der Entscheidung helfen wird. Glücklicherweise hat IE 11 derzeit einen größeren Marktanteil als die vorherigen drei Versionen zusammen (von denen IE10 unterstützt flexbox), daher ist die Verwendung in meinen Augen sicher. Was halten Sie von einer Kombination aus einem Framework und flexbox? Natürlich ignorieren Sie das Grid-System des Frameworks, während Sie es verwenden.
Rvervuurt

2
Flexbox kann verwendet werden, um auf einfachere Weise ein leistungsfähigeres Rastersystem zu erstellen, ist jedoch kein Rastersystem für sich. Besser, Simpler Grid Systems zeigt einige Ideen und ZURB Foundation for Apps verwendet Flexbox für
Layoutzwecke

Eigentlich kannst du beides verwenden, wenn du willst, was meiner Meinung nach die beste Wahl ist, weil du dich nicht um etwas kümmern musst, an das du schon seit einiger Zeit gewöhnt bist (wie für diejenigen, die nichts weiter wissen BS), aber für mich ist das Verkaufsargument von Flex-Box, dass es die gleiche Flexibilität hat, die man nur mit JS erreichen kann, ohne eine einzige Codezeile zu schreiben.
CTF0

Vollständige Kompatibilitätsdaten: caniuse.com/#feat=flexbox Beachten Sie, dass ältere Android- Geräte ebenfalls Probleme haben.
Cvrebert

dam, und ich dachte, wir sind fast da, um es zu benutzen, es scheint, als würde es ein weiteres Jahr dauern oder so, wir sehen es in freier Wildbahn, danke für das Heads-up.
CTF0

6

Ich habe Flexbox nicht verwendet (ich habe darüber gelesen und scheint großartig zu sein), aber ich bin ein Bootstrap-Frontend-Entwickler. Ich empfehle Ihnen, die Flexbox-Druckseiten zu testen, bevor Sie eine endgültige Entscheidung treffen. Weißt du ... Manchmal bereiten Druckstile schreckliche Kopfschmerzen, und Bootstrap hilft mir sehr, wenn ich Druckformate entwerfen muss.


Genau deshalb würden Sie das Float-Raster nur für die druckbaren Divs in Verbindung mit den Bootstrap-
Druckklassen

1

Ich fürchte, Sie haben einen weiteren Artikel über CSS-Tricks verpasst :

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 vorgesehen ist.

Das heißt nicht, dass Sie es vielleicht nicht versuchen, sondern nur zweimal überlegen. Und alles hängt letztendlich von der gewünschten Browserunterstützung ab.


24
Stellen Sie sicher, dass Sie verstehen, dass es in diesem Artikel um ein neues Grid-Layout geht - nicht um das Bootstrap-Grid.
Getsetbro

5
Ich muss sagen, dass ich das vermisst habe! :) Danke für die Korrektur.
Kout

Upvoted haben Sie eine sehr klare Unterscheidung in Bezug auf die Verwendung von Flexbox und Grid ohne Absichts- und Zweckkonflikt getroffen, und für mich spielt es keine Rolle, ob Sie Bootstrap-Grid oder Grid ayout meinen
Ahmad Farouk
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.