Seiten flexibel gestalten
diese Seite sieht nicht anders aus, als die vorherigen, aber sie ist entscheidend anders. Du merkst das, wenn Du Dein Browserfenster schmaler machst. Mach mal. Wechsel zur vorherigen Seite und nochmal. Jetzt gemerkt? Richtig: diese Seite ist in weiten Grenzen flexibel.
Bei meinen normalen Seiten ist das hinderlich, denn ich brauche eine feste Breite, um das Layout zu fixieren, sonst würde z.B. in der Seite mit den Menübeispielen, die ganzen Kästen durcheinander fallen, man könnte nicht mehr sauber zuordnen, was wozu gehört.
Alles, was ich dafür machen musste: in der CSS-Datei habe ich den Ausdruck
ersetzt durch:
Kaum zu glauben, aber das ist alles! In der ersten Version ist die Breite von "alles" fix, in der zweiten dehnt sich "alles" auch auf dieselbe Breite aus, aber nur, wenn es geht. Wenn das Browserfenster schmaler ist, dann nimmt "alles" eben nur die Breite des Fensters an.
Die beiden Container für den Seitenkopf und den Inhalt haben sich von allein auf die maximale Breite von "alles" minus "margin-left: 230px;" ausgedehnt und eben das ist auch flexibel. Die beiden linken Flächen haben eine fixe Breite und können nicht schmaler werden. Also geht flexibel nur in Grenzen ...
Und wozu das Ganze: es ist die Zeit der Smartphone und die haben zum Teil noch Bildschirme mit weniger Pixeln als Desktop-Monitore und werden überdies auch noch senkrecht gehalten - im Gegensatz zu Monitoren, die in der Regel waagerecht ausgerichtet sind.
Und jetzt ist auch der Vorteil von Fließtexten zu merken: sie brechen in der verbleibenden Restfläche freiwillig um.
Es gibt noch ein paar andere Dinge zu beachten: wenn ich jetzt ein paar Bildbehälter mit einer Tabelle nebeneinander stelle, dann verschwinden die bei einem schmaleren Fenster einfach rechts. Mal schauen ...
• Bilder in einer Tabelle:
 |
Und jetzt nicht als Tabelle, sondern als "figure" mit
• "float: left;"
In den nächsten Beispielen stehen "figure"s in einem einem Behälter - hier mit blauem Rand - dem ich diese Eigenschaften zugewiesen habe:
•"display:flex; flex-flow: row wrap;"
• "display:flex; flex-flow: row wrap; justify-content: center;"
Wenn Du Bilder aneinanderreihen möchtest, kannst Du Dir hier was aussuchen. Die CSS-Attribute stehen ausnahmsweise im Quelltext dieser HTML-Datei. Da kannst Du dann auch sehen, wie so ein Stil eingefügt wird:
Jetzt mal ein besonderer Fall: achte ganau drauf, was passiert, wenn das Browserfenster schmaler wird.
• "display: flex; justify-content: center;"
Genau: falls die "figure"-Schachtel einen Inhalt fester Breite enthält, dann bleibt sie so groß, wie sie definiert war. Falls nicht, wird sie schmaler und schmaler. Wenn also Fließtext drin steht, dann wird der umbrechen wie mein Text auf dieser Seite. Mit dieser Konstruktion lassen noch flexibler selbstanpassende Webseiten entwickeln. Aber das hat auch einen Nachteil: die Anreihrichtung muss festgelegt werden, entweder waagerecht oder senkrecht.
Wenn ich dem Behälter für diese Fläche (auf der Du gerade liest) das display: flex; zugewiesen hätte, dann sähe der Inhalt so wie rechts aus, denn der Standard für die Fließrichtung ist waagerecht. Wenn ich also flexible Container setzen will, muss ich erst einen Behälter genau dafür erzeugen und der bekommt die Eigenschaft "flex" und dann auch die Fließrichtung.
Ich gehe hier auf "flex" nicht weiter ein, Information darüber gibt es zuhauf im Internet. Viel Spaß beim lesen.