Layout mit flex-box

[Matthias Scharwies]

Servus!

Es betrifft nämlich im Prinzip erstmal nur drei oder vier Elemente in zwei Varianten der Anordnung:

Nimm doch Beispiel 5 und ersetze #news mit deiner Nav

In meiner idealisierten Vorstellung sollte der Seiteninhalt a) immer zentriert sein und

Da würde ich den body (oder ein Container-Element) mit

body {
  margin: 0 auto;
  max-width: 90%
}

zentrieren.

Die großen Formate musst Du mit media queries festlegen

dazwischen je nach Breite des Anzeigefensters frei skalieren, wobei dann in dem Fall, dass eine gewisse Mindestbreite unterschritten wird, sich das Layout dahingehend verändert, dass <nav> und <main> sich nicht mehr wie zuvor eine Zeile teilen, sondern sie untereinander angeordnet werden.

Ist im Beispiel schon drinnen.

Solange <nav> und <main> noch in einer Zeile angeordnet sind, sollte <nav> jedoch weniger stark skalieren als <main> und am besten eine min-width und eine max-width haben.

Das mit der min-width der Flex-Items würde ich weglassen, da der Vorteil ja ist, dass du die Breite durch flex-grow als Anteile (im Bsp. article 5/ntel und aside 2/ntel) der Seitenbreite festlegst. Flex ist die zusammenfassende Eigenschaft von flex-grow, flex-shrink und flex-basis.

  article {                        
    order: 3;	
    flex: 5 1 0;
  }
 
  aside {
    flex: 2 1 0;
  }

In den media queries kannst Du dieses Verhältnis dann ja ändern.

LG Matthias Scharwies