Beispiel:CSS-Flexbox-9.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
 <title>Flexbox 9 - Schrumpffaktor</title>
 <style>

.flex-container { display: flex; border: medium dotted; margin-bottom:1em; }

.flex-item { flex-grow: 1; flex-basis: 20%; flex-shrink: 1; }

.flex-item:nth-of-type(2) { flex-shrink: 3; }

.flex-item { border: thin solid; border-radius: 0 .5em .5em; margin: .5em; padding: .5em; background: #ffebe6; }

p.flex-item { font-weight: bold; text-align: center; } .flex-item:nth-of-type(2) { background: #fdfcf3; }

.flex-item:nth-of-type(3) { background: #ebf5d7; }

.flex-item:nth-of-type(4) { background: #e6f2f7; }

.flex-item:nth-of-type(5) { background: hsla(277, 53%, 73%,0.3); } </style> </head> <body>

Flexbox 9 - Schrumpffaktor mit flex-shrink

<main>

1

flex-shrink: 2

3

4

5

   <section class="flex-item">

Flexbox

Flexbox ist eine moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen. 

   </section>
   <section class="flex-item">

Was kann Flexbox?

Flexbox verzichtet auf feste Breiten, wobei sich das flexible Element an den tatsächlich verfügbaren Platz anpasst, indem es die Leerräume zwischen den Elementen gleichmäßig verteilt. 

   </section>
   <section class="flex-item">

RWD

Wenn die Breite des Viewports für ein horizontales Mehrspaltenlayout nicht mehr ausreicht, kann die Richtung der Anordnung per media queries auf eine vertikale Anordnung umgestellt werden. 

   </section>

</main> </body> </html>

Abgerufen am 17.07.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-Flexbox-9.html"