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

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?

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

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.

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.