Einzelnen Beitrag anzeigen
  #9 (permalink)  
Alt 18.11.2016, 18:31
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.093
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
also von Links nach Rechts die Größe
Das geschieht in der Regel durch die Container selbst. Als sogenannte Blockelemente nutzen sie immer den gesamten zur Verfügung stehenden Platz. Das sollten Webseitenersteller auch ausnutzen und so weit wie möglich nichts daran ändern. Das gilt in dem Beispiel für den Header (header-Element) und die Navigation (nav-Element).

Und auch für das unsichtbare main-Element.

In dem main-Elment gibt es zwei Container, die nebeneinander stehen. Das Nebeneinanderstehen, die Breite und die Höhe der Container werden durch Flexbox bestimmt. Der schmalere Container ist wiederum unsichtbar.

Bei schmalen Containern hat sich eine feste Breite bewährt, so habe ich es auch in dem Beispiel gehalten. Der breitere Container nimmt dann den Rest der zur Verfügung stehenden Breite ein.

Wenn der Platz für die beiden Container nebeneinander zu knapp wird werden sie mittels sogenannter Media Queries untereinander angeordnet und nehmen dann jeweils die gesamte Fensterbreite ein, zum Beispiel auf Smartphones oder Tablets.

Innerhalb des schmaleren Containers befinden sich drei weitere Container. Von Haus aus stehen sie bereits untereinander. Aber damit sie die volle Höhe einnehmen werden auch sie per Flexbox zusätzlich angeordnet.

Als Flexbox wird das Flexbox-Modell bezeichnet (display: flex). Das ist eine bereits seit einigen Jahren ins CSS übernommene Möglichkeit Containern den zur Verfügung stehenden Leerraum zuzuweisen und damit ihre Größe zu bestimmen.

Dabei können sie auch auf nebenstehende Container reagieren und so zum Beispiel alle die gleiche Höhe annehmen. Eine Möglichkeit, die bislang überhaupt nicht vorgesehen war und früher nur durch mehr oder weniger gut funktionierende Tricks erreicht werden konnte.

Sehr hilfreich ist auch zum Beispiel das Flexbox eine reine Eltern-Kind-Beziehung aufbaut und nicht weiter vererbt wird. Probleme wie beim floaten, dass durch ein clear oder clearfix immer wieder eingefangen werden muss, fallen dadurch einfach weg.

Gruss

MrMurphy

Geändert von MrMurphy (18.11.2016 um 18:34 Uhr)
Mit Zitat antworten
Sponsored Links