Was mir ein kaputter Warmwasserbereiter und Nassboxen über Flexbox beigebracht haben.

Unser Warmwasserbereiter ist kaputt gegangen. Ich ging in die Garage und hörte fließendes Wasser. Überprüfte die Wasserhähne im Haus, die Toilette funktionierte nicht, überprüfte draußen. Nein, Schlauch ab. Überprüfen Sie die Garage noch einmal, hören Sie immer noch Wasser, vielleicht ist es nur ein Geräusch, wenn Gas das Wasser erhitzt. Gehen Sie rüber und da ist Wasser im Boden.

Der Warmwasserbereiter leckte oben. Es gibt Pfützen auf dem Boden und durch den Teppich. Wir haben einen alten Teppich auf dem Boden, es ist also kein kalter, nackter Boden. Es wird jetzt von einem Strom durchströmt.

Die auf dem Teppich gelagerten Kisten haben Wasser aufgesaugt. Die Kartons sind nass und durchnässt. Das gilt auch für einige Inhalte. In diesen Kartons befanden sich ein paar Taschenbücher und einige Jurassic-Park-Dinosaurier. Die Bücher sind wassergeschädigt, aber die meisten trocknen aus.

Diese Boxen sind nicht mehr stabil, sondern flexibel.

Diese Boxen = Flexbox. Das gab mir einen LinkedIn-ähnlichen Klick-Köder-Titel und einen Vorwand, über Flexbox zu schreiben.

Flexbox

In CSS wird Flexbox verwendet, um Elemente horizontal oder vertikal in Zeilen oder Spalten anzuordnen. Die Gegenstände biegen sich, um den Raum im Behälter auszufüllen.

Um mit der Verwendung von Flex zu beginnen, fügen Sie display:flex zum übergeordneten Flex-Container hinzu, in dem Sie Ihre untergeordneten Elemente enthalten möchten.

.flex-container {
  display: flex;
}

<flex-container>
  <div>



<p>Then decide if you want row or columns with flex-directionoptions are row, row-reverse, column, and column-reverse. Row lines things up left-to-right, row-reverse lines them right-to-left. You might guess Column and column-reverse are similar but top-to-bottom and bottom-to-top respectively.<br>
</p>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
}

<flex-container>
  <div>



<h2>
  
  
  Justify Content
</h2>

<p>So how to arrange things horizontally? Use justify-content: to align the books in your boxes. Here you have several options.</p>

<ul>
<li>justify-content: center - Aligns items in the center of the container.</li>
<li>justify-content: space-around - Places space at the front and end of the container plus in between each item.</li>
<li>justify-content: space-between - Pushes items to the front and end of the container and place space evenly between the items.</li>
<li>justify-content: flex-start (default) - Aligns at the start of the container.</li>
<li>justify-content: flex-end - Aligns at end of container.
</li>
</ul>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}

Dieses Bild zeigt die Bücher zentriert in der Box.

Dieses Bild zeigt die Bücher mit angewendetem Leerzeichen. Zwischen Anfang und Ende der Box gibt es Lücken.

Dieses Bild zeigt die Bücher mit angewendetem Abstand dazwischen. Bücher werden nach vorne, in die Mitte und ans Ende der Schachtel geschoben, mit Abstand dazwischen.

Dieses Bild zeigt Flex-Start. Alle Bücher werden an den Anfang oder die linke Seite der Box geschoben.

Dieses Bild zeigt das Flex-Ende. Alle Bücher werden an das Ende oder die rechte Seite der Schachtel geschoben.

Ausrichtung

Verwenden Sie align-items, um Dinge im übergeordneten Container vertikal auszurichten.

• align-items: flex-start – Wird oben am Container ausgerichtet
• align-items: flex-end – Am Boden des Behälters ausrichten
• align-items: center – Platziert Elemente in der vertikalen Mitte
• align-items: baseline – Ausrichtung entlang der Grundlinie innerhalb jedes Elements.
• align-items: stretch (Standard) – Streckt Elemente, um die Höhe des Containers auszufüllen.

.flex-container {
  display: flex;
}

Illustriert mit CSS. Diese Bilder wurden mit CSS erstellt.

Abschluss

Dies ist nur eine Einführung in Flexbox. Weitere ausführliche Erklärungen finden Sie in „What the Flexbox“ von Wes Bos oder in den MDN-Webdokumenten.