Responsives Design: Spalten vs Flexbox

Question

Beim Erlernen von CSS und Erstellen ansprechender Spaltenlayouts lernte ich die Flexbox-Methode (aber auch die Tatsache, dass Sie es vermeiden sollten, zu viel zu verwenden). Kürzlich habe ich ein neueres Video von Teamtreehouse angeschaut, das Spalten, Spaltenzählungen usw. verwendet, um ein reaktionsfähiges Säulendesign zu erstellen. Welches ist besser zu verwenden, oder gibt es eine dritte Option, die die beste ist?

Edit: Sorry, anscheinend ist es ein älteres Video. Der Grund, warum ich frage, ist, weil es nicht auf meinem Webdesign-Track war, also war ich mir nicht sicher, ob es nicht mehr relevant war.

Answer 1

Die meisten modernen Seitenlayouts entfernen sich von floated columns und migrieren zu flexboxes. Sie werden feststellen, dass sogar Bootstrap 4 ihre Layouts auf flexbox basieren wird.

Der Hauptvorteil der Verwendung von Flexbox finde ich die vertikale Ausrichtung, die revolutionär ist. Denn davor war einer der größten Probleme, mit denen sich Entwickler konfrontiert sahen. Sie können dom Elemente auch neu anordnen, was ziemlich cool ist. Es gibt auch eine Flex-Basis, die es Ihnen ermöglicht, ein div mit einer festen Dimension zu haben und anderen divs zu erlauben, den Rest der Breite/Höhe zu belegen. Die Möglichkeiten sind endlos!

TL; DR Flexbox macht Ihr Leben leichter. Nur wenn ältere Browser unterstützt werden, ist dies kein Problem.

Answer 2

Sie möchten vielleicht einen Blick auf Boostrap werfen, wenn Sie bereits mit CSS vertraut sind und ein responsives Design wünschen. Es ist leicht zu holen. Ich finde es spart mir viel Zeit und Mühe, anstatt für jedes Projekt ein eigenes CSS zu programmieren.

Answer 3

Wenn Sie mit CSS arbeiten, müssen Sie ständig überlegen, welche Browser Sie unterstützen möchten, und dann auswählen, welche Funktionen Sie verwenden möchten. Dafür gibt es zum Beispiel in Ihrem Fall http://caniuse.com/

eine praktische Website können Sie sehen, dass IE8 nicht Spalten unterstützt http://caniuse.com/#search=columns und weder unterstützt Flexbox http://caniuse.com/#search=flexbox also, wenn Sie also 8 unterstützen, möchte ich vorschlagen, würden Sie die tipical gefloatete Spalte verwenden Ansatz. Es gibt viele Grid-Systeme da draußen, aber ich würde mit wie oben vorgeschlagen gehen. http://getbootstrap.com/

Answer 4

Beachten Sie, dass das CSS-Raster nicht mit den alten Floated-Spalten übereinstimmt. Es klingt wie Teamtreehouse verwendet CSS-Grids.

Das CSS-Gitter ist ein 2D-System (Zeilen und Spalten), während die Flexbox 1D (entweder Zeilen oder Spalten) ist. So können sie in Verbindung mit CSS-Grids für das Seitenlayout und Flexbox für das interne Detaillayout verwendet werden. Siehe:

https://tutorialzine.com/2017/03/css-grid-vs-flexbox