Flex-wrap und die Basis für ein CSS Seitenlayout
Flex-wrap und die Basis für ein CSS Seitenlayout

Flex-wrap und die Basis für ein CSS Seitenlayout

Tutorial

Da man im Layout einer Website aber selten alle Container nebeneinander haben möchte, bedient man sich der Eigenschaft flex-wrap

Spalten nebeneinander und idealerweise in der gleichen Breite macht Sinn wenn ein Unterblock zum Beispiel eine Fotogalerie zeigt. Im klassischen Layout einer Webseite, dem Basislayout, arbeiten wir allerdings mit Header, Footer, Navigation, Inhalt und Sidebar. Alle diese Elemente streng nebeneinander anzuordnen macht daher wenig Sinn und würde zudem auch noch nicht wirklich gut aussehen.

Als HTML Struktur lege ich einen Parent-Container #parent und 5 Child-Container #child fest.

  <body>
    <div id="parent">
      <div id="child" class="header">Header</div>
      <div id="child" class="nav">Nav</div>
      <div id="child" class="article">Article</div>
      <div id="child" class="sidebar">Sidebar</div>
      <div id="child" class="footer">Footer</div>
    </div>
  </body>

Um das Ganze optisch ansprechend zu gestalten, habe ich den Hintergrund (body) schwarz und den Parent-Conatiner mit Weiss festgelegt. Der Parent-Conatiner sowie nochmal alle Child-Container haben die id’s #parent und #child

Alle Child-Container haben einen Blauton als Hintergrundfarbe. Um mit diesen noch einmal individuell arbeiten zu können haben diese entsprechende Klassen bekommen (.header .nav . article .sidebar und .footer)

      body {
        background-color: black;
      }
      #parent {
        max-width: 60%;
        background-color: white;
        margin: 20px auto;
        padding: 25px;
        display: flex;
        flex-wrap: wrap;
      }
      #child {
        padding: 10px;
      }

Flex-wrap

Was tut flex-wrap denn nun? Die Deklaration flex-wrap sorgt für eine mehrzeilige Darstellung der Child-Container innerhalb des Parent-Containers.

Mit Hilfe von flex-basis, flex-grow und flex-shrink in der verkürzten Schreibweise sowie der einfachen Angabe von Prozentwerten können wir nun die Breite der jeweiligen Container und somit deren Anordnung festelgen.

      .header {
        width: 100%;
        height: 100px;
        background-color: aqua;
      }
      .nav {
        width: 100%;
        height: 20px;
        color: white;
        background-color: blue;
      }
      .article {
        flex: 0 0 66%;
        height: 300px;
        background-color: dodgerblue;
      }
      .sidebar {
        flex: 1 1 0;
        height: 300px;
        background-color: deepskyblue;
      }
      .footer {
        width: 100%;
        height: 150px;
        color: white;
        background-color: darkblue;
      }

Header, Nav und Footer haben alle die Breite 100%, erscheinen also alle in ihrer eigenen Reihe.
Die Höhe habe ich individuell festgelegt.

Damit Article und Sidebar nebeneinander stehen, habe ich Article die Breite 66% zugeordnet. Dies habe ich mit Hilfe der Eigenschaft flex getan indem ich ihr den Wert 0 0 66% zugewiesen habe. Dies bedeutet dass Article weder wächst, noch schrumpft sondern lediglich 66% der Breite des Elternelementes besitzt.

Was Sidebar betrifft, da habe ich die Werte 1 1 0 festgelegt. Die flex-basis ist gleich 0 während durch flex-grow und flex-shrink Sidebar in der Breite wachsen oder schrumpfen kann. Es ist somit das flexible Element in dieser Reihe.

Das Ergebnis im Browser sieht dann so aus.

Zusammenfassung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.