CSS-Parameter für einfache Grid-Layouts

<h2>CSS-Parameter für einfache Grid-Layouts</h2> Mit den folgenden CSS-Eigenschaften kannst du eine Beitragsliste in UpFront relativ einfach als Grid bzw. als flexible Karten darstellen. <h3><code>display: flex</code></h3> Aktiviert das <strong>Flexbox-Layout</strong> für ein Element. <pre><code class="language-css">ul.uf-posts { display: flex; } </code></pre> Die direkten Kind-Elemente des Containers – hier also die einzelnen Beiträge – können dadurch flexibel angeordnet werden. <hr> <h3><code>flex-wrap: wrap</code></h3> Erlaubt den Elementen, in die nächste Zeile umzubrechen, wenn nicht mehr genügend Platz vorhanden ist. <pre><code class="language-css">flex-wrap: wrap; </code></pre> Ohne <code>wrap</code> würden die Elemente möglichst in einer einzigen Zeile bleiben. Für responsive Grids ist <code>wrap</code> deshalb besonders praktisch. <hr> <h3><code>flex</code></h3> Mit <code>flex</code> bestimmst du, wie sich ein Flex-Element innerhalb des verfügbaren Platzes verhält. <pre><code class="language-css">flex: 1 1 calc(33.333% - 20px); </code></pre> Die drei Werte bedeuten: <ul> <li><code>1</code> – das Element darf wachsen.</li> <li><code>1</code> – das Element darf schrumpfen.</li> <li><code>calc(33.333% - 20px)</code> – die Ausgangsbreite beträgt ungefähr ein Drittel des verfügbaren Platzes, abzüglich des gewünschten Abstands.</li> </ul> Damit lassen sich beispielsweise drei gleich große Spalten erzeugen. <hr> <h3><code>min-width</code></h3> Legt die <strong>minimale Breite</strong> eines Elements fest. <pre><code class="language-css">min-width: 280px; </code></pre> Ein Beitrag wird dadurch nicht schmaler als <code>280px</code>. Wird der verfügbare Platz kleiner, können die Elemente dank <code>flex-wrap: wrap</code> in die nächste Zeile wechseln. Das ist besonders für responsive Layouts hilfreich. <hr> <h3><code>max-width</code></h3> Legt die <strong>maximale Breite</strong> eines Elements fest. <pre><code class="language-css">max-width: 460px; </code></pre> Das Element kann also kleiner sein, aber nicht breiter als <code>460px</code> werden. Das eignet sich besonders für Kartenlayouts, bei denen die einzelnen Beiträge nicht beliebig breit werden sollen. <hr> <h3><code>box-sizing: border-box</code></h3> Sorgt dafür, dass <code>padding</code> und <code>border</code> bereits in der angegebenen Breite enthalten sind. <pre><code class="language-css">box-sizing: border-box; </code></pre> Ohne <code>border-box</code> kann ein Element durch Padding oder Border tatsächlich breiter werden als die angegebene Breite. Für flexible Layouts ist <code>border-box</code> deshalb meistens die unkompliziertere Variante. <hr> <h3><code>gap</code></h3> Definiert den Abstand zwischen den Flex-Elementen. <pre><code class="language-css">gap: 30px; </code></pre> Hier beträgt der Abstand zwischen den Beiträgen <code>30px</code>. Der Vorteil gegenüber zusätzlichen <code>margin</code>-Angaben: Du musst nicht jedem einzelnen Beitrag eigene Abstände geben. <hr> <h3><code>display: inline-flex</code></h3> Kombiniert das Verhalten eines Inline-Elements mit Flexbox. <pre><code class="language-css">display: inline-flex; </code></pre> Das Element verhält sich nach außen ähnlich wie ein Inline-Element, seine eigenen Inhalte können innerhalb des Elements aber mit Flexbox angeordnet werden. <hr> <h2>Kurzreferenz</h2> <table> <thead> <tr> <th>Parameter</th> <th>Funktion</th> </tr> </thead> <tbody> <tr> <td><code>display: flex</code></td> <td>Aktiviert Flexbox</td> </tr> <tr> <td><code>display: inline-flex</code></td> <td>Flexbox + Inline-Verhalten</td> </tr> <tr> <td><code>flex-wrap: wrap</code></td> <td>Erlaubt Zeilenumbrüche</td> </tr> <tr> <td><code>flex</code></td> <td>Bestimmt Wachstum, Schrumpfen und Ausgangsbreite</td> </tr> <tr> <td><code>min-width</code></td> <td>Legt die minimale Breite fest</td> </tr> <tr> <td><code>max-width</code></td> <td>Legt die maximale Breite fest</td> </tr> <tr> <td><code>box-sizing: border-box</code></td> <td>Bezieht Padding und Border in die Breite ein</td> </tr> <tr> <td><code>gap</code></td> <td>Definiert den Abstand zwischen den Elementen</td> </tr> <tr> <td><code>calc()</code></td> <td>Berechnet einen CSS-Wert dynamisch</td> </tr> </tbody> </table> <h3>Typische Kombination</h3> Für ein einfaches responsives Grid ist diese Kombination besonders praktisch: <pre><code class="language-css">ul.uf-posts { display: flex; flex-wrap: wrap; gap: 30px; } li.uf-post { min-width: 280px; box-sizing: border-box; } </code></pre> Darauf kannst du dann je nach gewünschtem Layout weitere Eigenschaften wie <code>flex</code> oder <code>max-width</code> aufbauen.