Flex-Box

[MrMurphy1]

Hallo

Für mich heißt das "systematisch, planmäßig, geordnet".

Genau. Und das machst du offensichtlich nicht.

Zunächst benötigst du einen bestimmen minimalen HTML-Grundquelltext, von dem DU genau weißt wie er sich auswirkt. Den musst DU beherrschen.

Darin musst DU fremden Quellcode so einfügen können, dass die Webseite funktioniert.

Ein fremder minimaler HTML-Grundquelltext, dessen Auswirkungen du nicht in- und auswendig im Schlaf kennst, nützt dir überhaupt nichts.

Da ich in der Regel täglich mehrere Test- und Übungsdateien erstelle oder aus vorgegebenen Quelltexten Dateien mit meinem Grundgerüst erstelle benutze ich interne CSS-Angaben. Sonst müsste ich noch zusätzlich hunderte externe CSS-Dateien verwalten.

Die CSS-Angaben sollten so aufgesplittet sein, das du deine Angaben ohne Probleme erkennen und ändern kannst. Dann können für die Höhenangaben zum Beispiel sein:

• Grundeinstellungen
• Grundeinstellungen für diese Seite
• Spezielle Einstellungen (Abstände, Rahmen)
• Farben
• Flexbox Grundlayout
• Höhenangaben

Je nach Bedarf füge ich dann weitere Abteilungen hinzu oder lasse welche weg. Das kommt immer auf den konkreten Einzelfall an.

In der Praxis splitte ich die CSS-Angaben nicht so extrem aus, beim Testen hat sich das aber bewährt.

In deinen CSS-Angaben sind die jeweiligen Höhenangaben so verteilt dass sie kaum zusammenhängend beurteilt werden können. Zudem verwendest du für die selben Elemente verschiedene Bezeichnungen, was deine CSS-Angaben zusätzlich unübersichtlicher macht, obwohl es relativ wenige CSS-Angaben gibt. Strukturiert geht anders.

Die Abmessungen der entscheidenen Elemente sollten sichtbar gemacht werden, am besten durch Rahmen. Die lenken nicht so sehr ab wie Farben und die Farben stehen für andere Lösungshilfen zur Verfügung.

Die Elemente sollten sichtbar und sinnvoll benannt werden, um sie direkt im Quelltext ohne großes Umdenken erkennen zu können. Das ist bei dir nicht möglich.

Ich gehe zum Beispiel davon aus, dass du weder weißt wie groß (hoch) das body-Element ist noch wie groß (hoch) das von dir überflüssigerweise eingefügte umschließende div-Element ist und wie sich das auf die Flexbox-Darstellung auswirkt. Zum Beispiel auch die unterschiedliche Darstellung in einigen Browsern.

Du solltest eine Ausgangsdatei mit nur wenigen Grundeinstellungen als Grundlage haben und davon eine oder mehrere Kopien erstellen, mit denen du dann die Tests durchführst. Wenn du die dann gleichzeitig im Browser öffnest kannst du die Auswirkungen deiner Änderungen besser erkennen, indem du zwischen den Tabs hin- und herschaltest.

Teste die Dateien in den relevanten Browsern wie Firefox, IE, Chrome, Opera und nach Möglichkeit Safari. Verändere dazu auch die Fenstergrößen. Teste die Dateien zusätzlich in Smartphones und / oder Tablets oder zumindest in deren Emulatoren. Grade bei Flexbox zeigen die unterschiedlichen Browser die Seiten teilweise noch sehr unterschiedlich an.

WYSIWYG-Editoren sind in dieser Hinsicht eine Pest. Die bringen entweder ihre eigenen Browser mit, die mit der Realität wenig zu tun haben oder verführen dazu, die Seite nur in einem Browser anzuzeigen, mit dem sie direkt verknüpft sind.

So weit nur mal ein paar Grundlagen zum strukturierten Testen.

Was fehlt noch außer einen HTML-Code mit header, Inhalt und footer zu erstellen

header und footer benötigst du nur wenn du die auch testen willst.

Theorie hilft mir dann nichts.

Ich denke nicht das dir meine Minimal-Datei weiterhilft, da du sie nicht verstehen wirst.

die Zukunft heißt flexbox? Wenn es in der Praxis bedeutungslos ist ist es verlorene Zeit die man anders besser einsetzt?

Flexbox testen - ja. Das ist bereits Gegenwart und auch die Zukunft. Ich meine die Zeitverschwendung mit den Höhenangaben. Ein Vorteil von Flexbox ist doch grade das Höhen- und auch Breitenangaben so weit wie möglich vermieden werden und die Browser die selbst berechnen.

Ich dachte das Thema wäre wichtig um von float und clear weg zu kommen

Float und Clear werden durch Flexbox nicht ersetzt, sondern haben auch zukünftig ihre Berechtigung und sollten auch angewandt werden, wenn es sinnvoll ist. Im Zuge der berechtigten Verdammnis von Tabellen zum Layouten (besser: zum Erstellen eines Grundlayouts) haben viele Webseitenersteller aus den Augen verloren, dass das Floaten auch nur ein Hilfskonstrukt war, für das es bis zur Einführung von Flexbox nichts besseres gab. Deutlich sinnvoller als Tabellen, aber nicht wie Flexbox direkt zum Erstellen eines Grundlayouts entwickelt.

Kannst Du das auch konkretisieren.

Ähm - das würde ein kleines Buch füllen, sonst hätte ich das bereits getan. Im Rahmen eines Forums ist das nicht möglich. Wenn du auf Probleme stößt helfe ich dir gerne weiter soweit ich Lösungen kenne.

Ich kann dir in einem weiteren Beitrag aber meine Linksammlung zu Flexbox-Seiten und -Videos zur Verfügung stellen. Falls dein Englisch nicht so gut ist solltest du dich davon bei den englischsprachigen Seiten nicht abschrecken lassen. Stöber die durch, häufig enthalten die Demos und den dazugehörigen Quelltext. Den solltest du dann auch ohne fundierte Englischkenntnisse übernehmen können. Gleiches gilt für die englischsprachigen Videos. Da ich keine Lust habe die Links in das Forumformat umzuwandeln werde ich die als komplette HTML-Quelldatei zur Verfügung stellen. Damit hast du dann auch meine Minimaldatei, falls die dich interessiert.

Ich würde die Höhenangaben mit Flexbox zudem zweimal testen: Einmal mit Containern mit Minimalinhalt und einmal mit Testinhalt. Auch dazu stelle ich dir jeweils einen Quelltext zur Verfügung.

Gruss

MrMurphy