Flex-Box

[MrMurphy1]

Hallo

Ich habe es mit Google Chrome, SeaMonkey, Opera, Firefox und Safari angeschaut und keinen Unterschied feststellen können.

Wieso vermisse ich den IE? Das ist ein Standardbrowser, mit dem alle halbwegs ernsthaften Webseiten geprüft werden sollten.

Jetzt erkenne ich wie die einzelnen Boxen getrennt werden. Ich habe mich immer von der Graphik der Beispiele verleiten lassen.

Wenn bei Beispielen in verschiedenen Containern immer der gleiche oder sehr ähnlicher Inhalt steht (seien es Zahlen oder immer die gleichen Sätze oder immer nur eine Überschrift) und / oder die Höhe künstlich bestimmt wird sind die Beispiele für die Praxis mit Vorsicht zu genießen. Das ist dann reine Theorie.

Die Zwischenräume zwischen den Kind-Elementen werden nicht automatische durch "display: flex;" erzeugt.

Das kommt auf die Breite der Container an. Wenn die Container keine 100% Breite ergeben kann der Abstand sehr wohl durch Flexbox erstellt werden.

  nav {
  }
  section {
  }
  aside {
  }

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

Ja, bei Testdateien werden häufig CSS-Elemente ohne Inhalt erstellt. Die stören nicht und zum Testen können die dann einfach mit Anweisungen gefüllt werden.

  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.

Nein. Auch das ist eine übliche Vorgehensweise bei Testdateien mit CSS. Ein Grundprinzip von CSS ist es das nachfolgende Anweisungen bereits bestehende überschreiben. So hat man bereits mehrere Anweisungen im CSS stehen und nur die unterste ist gültig. Wenn ich die Anweisung mit dem Wert baseline ausprobieren möchte schiebe ich die einfach nach unten. So muss ich mir erstens keine Gedanken machen wie die Anweisungen korrekt geschrieben werden und zweitens kann mein Editor ganze Zeilen mit einer Tastenkombination verschieben. So kann ich die unterschiedlichen Anweisungen Ruck-Zuck wechseln und testen - Testdatei halt. Von den vier align-items-Anweisungen sind die ersten drei also ohne Funktion.

  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?

Ich verstehe nicht so ganz was du meinst, aber wahrscheinlich hast du recht.

  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.

Die Höhenangaben sind auskommentiert. Zum Testen kann die Kommentierung entfernt und die Werte angepasst werden. Auch das ein übliches Vorgehen bei Testdateien.

Die Höhe des body dient in diesem Fall dem Testen von align-Anweisungen.

Mit der oben genannten Web-Seite bin ich nicht klar gekommen.

Das liegt an den fehlenden Grundlagen. Die kannst du nicht innerhalb von ein paar Wochen lernen.

Gruss

MrMurphy