Flex-Box

[Franz]

Hallo,

und hier noch mal eine Testdatei, bei der die Höhe der Container durch ihren Inhalt bestimmt wird.

Wenn du dir die Datei so wie sie ist in verschiedenen Browsern anschaust sollte dir bei einem der "Standardbrowser" eine unterschiedliche Darstellung auffallen.

Nach einer Pause wieder zurück.
Ich habe es mit Google Chrome, SeaMonkey, Opera, Firefox und Safari angeschaut und keinen Unterschied feststellen können. Mit TextMate ich finde ich nicht wie man zum Browser schaltet.

/Grundeinstellungen/ body > * { padding: 0.5rem; border: 2px solid; border-radius: 0.5rem; margin: 0.5rem; }

Jetzt erkenne ich wie die einzelnen Boxen getrennt werden. Ich habe mich immer von der Graphik der Beispiele verleiten lassen. Die Zwischenräume zwischen den Kind-Elementen werden nicht automatische durch "display: flex;" erzeugt.

  nav {
  }
  section {
  }
  aside {
  }

}

Ich gehe davon aus, daß dies zur separaten, freien Gestaltung gemeint ist.

  body {
     display: flex;
     align-items: stretch;
     align-items: flex-start;
     align-items: baseline;
     align-items: center;
  }

Das erzeugt erst die unterschiedlichen Höhen der Kind-Boxen die sich dann am Textinhalt anpassen. Stretch wäre in diesem Fall unnötig. Durch "center", vermute ich, können auch baseline und flex-start wegfallen. Diese bekommen erst jeweils einen Sinn wenn man center weg läßt.

  nav {
     flex-basis: 20%;
  }
  section {
     flex-basis: 60%;
  }
  aside {
     flex-basis: 20%;
  }

Die richtige Größe wird dann eigentlich durch die Breite des Containers bzw. dem Zwischenraum erreicht?

  body {
     min-height: 100vh;
  }
  nav {
     /*height: 80px;*/
  }
  aside {
     /*height: 50px;*/
  }
  section {
     /*height: 150px;*/
  }
  section {
     /*min-height: 100px;*/
  }

Ist dies überhaupt erforderlich? Die Höhe paßt sich ja sowieso dem Inhalt an.

Auf alle Fälle habe ich einmal den Einblick bekommen. Mit der oben genannten Web-Seite bin ich nicht klar gekommen.

LG Franz