CSS: Ein Flexbox Beispiel

Das sogenannte „CSS Flexible Box Layout Module“ – kurz: Flexbox – stellt eine der wesentlichen Techniken zur Gestaltung mit CSS dar.

In diesem Beitrag zeige ich dir, wie man mit ein paar einfachen Schritten dieses dreispaltige Flexbox Layout erstellt, dass sich als Basis für viele verschiedene Webseiten verwedenden lässt.


flexbox css layout
Das dreispaltige Layout wird bei der Desktopversion verwendet.


Flexbox wurde speziell für das Arbeiten mit flexiblen und responsiven Layouts erfunden. Anders als Floats ist die Flexbox Technik modern und bietet viele, komfortable Möglichkeiten. Mittlerweile wird es von fast allen Browsern mit nahezu 100% unterstützt.



Auf kleineren Bildschirmen verschiebt sich die hellgraue Spalte automatisch nach unten:

Flexbox Layout auf Tablets
Das Flexbox Layout auf Tablets.

Und auf Smartphones bricht auch die mittelgraue Spalte um:

Flexbox Layout in der Smartphone Ansicht
Flexbox Layout in der Smartphone Ansicht.



Zudem ist der Einstieg nicht schwer. In diesem Beitrag erstelle ich Schritt für Schritt ein einfaches Flexbox Layout.

Als Erstes erstelle ich die Grundlage, das HTML Markup. Danach widme ich mich der Gestaltung dieser Basis mit CSS.



Das HTML Markup:

Zuerst brauchen wir einen Behälter, die das komplette Flexbox Layout umschließt:

<div class="wrapper>
   <!-- hier hin kommt der Inhalt der Flexbox -->
</div>


Der Inhalt einer Flexbox – also alle Elemente die sich zwischen diesen beiden divs befinden werden – nennt man Flex Items.

Für mein Layout brauche ich drei solcher Flex Items, damit am Ende drei Spalten entstehen. Ich nenne sie box1, box2 und box 3.


  <div class="inner">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

Das wars auch schon fast. Hinzu kommen noch eine Seitenüberschrift und eine Fußzeile (engl. Footer).



Das komplette HTML Markup sieht dann so aus:

<h1>Heading</h1>

<div class="wrapper">
  <h2>Main Navigation</h2>

  <div class="inner">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  <h3>Footer</h3>
</div>

Die Basis steht. Jetzt gilt es, das Ganze mit CSS und der Flexbox Methode in Form zu bringen – und weil Smartphones und Tablets immer wichtiger werden natürlich so, dass sich das Layout an alle Bildschirmgrößen anpasst.

Ich beginne mit dem Behälter, dem ich ja mit HTML die Klasse .wrapper zugewiesen habe:

.wrapper {
 background: #777;
  width: 95%;
  max-width: 90rem;
  height: auto;
  margin: 0 auto;
}

Für die Weite (width) definiere ich 95%, das heißt der Behälter nimmt 95% der Größe des Browserfensters ein. Wenn du willst dass er sich auf kleinen Bildschirmen über die gesamte Breite erstreckt, kannst du hier natürlich auch 100% eingeben.

Die maximale Breite von .wrapper sind 90rem, also 1440px. (Infos zur Maßeinheit rem findest du hier.) Mit Hilfe von width und max-width habe ich also festgelegt: „Sei so breit wie 95% der Weite eines Bildschirmes, aber maximal 1440px.“

Das hat den Vorteil dass .wrapper auf Smartphone und Tablet die gesamte Bildschirmweite (minus 5%) nutzt.

Auf Desktopgeräten wird der Inhalt meines Behälters mit Hilfe der magischen Zeile margin: 0 auto; auf die Bildschirmmitte zentriert. Dieser Fokus erleichtert NutzerInnen mit großen Bildschirmen das Ansehen und Lesen der Inhalte unserer Flexbox.

Schließlich erlaubt height:auto; dem Behälter, immer so hoch zu sein wie sein Inhalt.



Jetzt stylen wir den Flex-Container, .inner:

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

display: flex – aktiviert die Flexbox

align-items: center; zentriert die Flex-Items auf vertikaler Ebene

justify-content: center; zentriert die Flex-Items auf horizontaler Ebene

flex-wrap: wrap; aktiviert den Zeilenumbruch der Flex-Items, wenn eine bestimmte Bildschirmweite unterschritten wird.



Jetzt sind die Flex-Items dran:

.box1 {
  background-color: #888;
  height: 20rem;
  flex: 1 1 20rem;
  max-width: 100%;
}

Die Höhe ist optional: Weil mein Layout keinen Inhalt hat, muss ich eine definieren. Divs haben von Natur aus nämlich keine eigene Höhe. Mit Inhalten wie Texten oder Bildern brauchst du diese Angabe also nicht.

flex: 1 1 20rem ist die Kurzschreibweise für:

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 20rem

flex-grow: 1; Flex-Items düften sich ausdehnen

flex-shrink: 1; Flex-Items dürfen kleiner werden als festgelegt (also 20rem bzw. 320px).

flex-basis: 20rem; definiert die Basisgröße der Flex-Items, in diesem Fall also 20 rem (oder 320px).

So sieht der Code für alle Flex-Items aus:

.box1 {
  background-color: #888;
  height: 20rem;
  flex: 1 1 20rem;
  max-width: 100%;
}

.box2 {
  background-color: #aaa;
  height: 20rem;
  flex: 1 1 20rem;
  max-width: 100%;
}

.box3 {
  background-color: #eee;
  height: 20rem;
  flex: 1 1 20rem;
  max-width: 100%;
}



Unser Flexbox Layout sieht auf Desktopgeräten jetzt so aus:

flexbox css layout
Das fertige Flexbox Layout



Zum Abschluss zeige ich dir hier den kompletten Code: Zuerst das HTML Markup und anschließend alle Styles in CSS.



Fertiges HTML – Markup:

<h1>Heading</h1>

<div class="wrapper">
  <h2>Main Navigation</h2>

  <div class="inner">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  <h3>Footer</h3>
</div>

Um meinem Layout ein etwas besseres Aussehen zu gehen, habe ich ein paar weitere Styles hinzugefügt. Zum Verständnis der Flexbox sind sie aber nicht nötig. Deshalb habe ich sie vorher nicht erwähnt.

Der fertige CSS Code:

/* bessere Schriftart von Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  
  background: #555;
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3 {
  text-align: center;
}

.wrapper {
  background: #777;
  width: 95%;
  max-width: 90rem;
  height: auto;
  margin: 0 auto;
    
  /* damit das Layout etwas besser aussieht */
  border-radius: 1rem;
}

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.box1 {
  background-color: #888;
  height: 20rem;
  flex: 1 1 20rem;
  max-width: 100%;
}

.box2 {
  background-color: #aaa;
  height: 20rem;
  flex: 1 1 20rem;
  max-width: 100%;
}

.box3 {
  background-color: #eee;
  height: 20rem;
  flex: 1 1 20rem;
  max-width: 100%;
}


Ich hoffe, dass dir mein einfaches Flexbox Layout dabei hilft, einen kleinen Einblick in die CSS Flexbox Methode zu gewinnen.


Den kompletten, funktionierenden Code findest du in meiner Pen. Dort kannst du ihn testen und kopieren, wenn du ihn selbst verwenden möchtest.

Am Besten funktioniert Codepen auf der externen Webseite. Du erreichst diese indem du einfach auf den Edit on Codepen Button klickst.

See the Pen Basic Flexbox Template by Marty (@Marty-Development) on CodePen.



Wenn du dieses Template als Basis für eine Webseite – oder den Teil einer Webseite – benutzen willst und mir einen Kommentar schreibst, werde ich mir deine Webseite garantiert ansehen!

Auch Feedback sehe ich immer gerne. Dann weiß ich ob dir was ich mache gefällt und hilft, und was ich nächstes Mal besser machen kann.

Danke fürs Lesen! 🙂



Diese Webseiten könnten dich interessieren:

→ Veröffentlicht am 02/05/2020 in CSS, Code & Co

→ Schlagwörter: , , Einloggen um den Post zu editieren.

0 comments on “CSS: Ein Flexbox Beispiel

    Schreibe einen Kommentar

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