Flex-Box

[Franz]

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

Ich arbeite mit Mac. Wußte gar nicht, daß es den IE für Mac gibt? Soviel ich aus Büchern und anderen Foren weiß macht der IE die größeren Probleme.

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.

Aha! Immer fällt einem Neuling nicht auf was man alles testen kann oder soll. Gott sei Dank gibt es ja das Forum.

  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.

Das Grundprinzip des Überschreibens ist mir ja klar aber, daß man so üben kann fällt einem manchmal nicht selbst ein.

  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.

Ich meinte, daß durch die Prozentangabe, die sich an der Breite des Containers richtet, die richtige Größe erreicht wird.

  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.

Ich habe schon ein paar mal gehört, daß man die Höhenangaben flexibel lassen soll. In diesem Fall werden aber auch feste Höhen angegeben. Ist es nicht so, daß dadurch ein größerer Inhalt zum scrollen gezwungen wird? Bei kleineren Bildschirmen dürfte es dann kein Problem geben. Bei der Breitenangabe würde ich dann eher zur flexiblen Prozentangabe tendieren.

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.

Vor allem, wenn sich immer wieder neuere Aspekte ergeben die wiederum geübt werden sollen um die Zusammenhänge zu verstehen.

LG Franz