Beispiel:Flex-Layout-3.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"> <title>Flexbox-Layout - 3</title>

<style> 

  * { box-sizing: border-box; }

 body {
   /* Grundlayout: Kopf, Inhalt und Fuß untereinander. */
   display: flex;
   flex-direction: column;
   gap: 1rem;
   min-height: 90dvh;
   max-width: 80em;
   margin: auto;
   font-family: sans-serif;
 }
 
 header, nav, nav li, article, aside, footer {
   /* allgemeine Gestaltungsdetails */
   border-radius: 0 .5rem .5rem;
   border: thin solid;
 }
 header {
   /* Header: Logo bleibt fest, der Slogan darf umbrechen. */
   display: flex;
   flex-wrap: wrap;
   gap: .7rem;
   align-items: center;
   font-size: 1.5em;
   padding: .7rem;
   background-color: oklch(0.95 0.01 235);
   border-color: steelblue;
 }

 .logo {
   /* horizontal zentriert, wenn in eigener Zeile */
   margin: auto;
   --logo-size: 3rem;
   height: var(--logo-size);
 }
 
 .logo img {
   height: var(--logo-size);
   aspect-ratio: 1;
 }

 .slogan {
   /* Der Slogan bricht um. */
   flex: 1 1 22em;
   font-size: 2rem;
 }

 /* Inhalt Article mit Cards */
 article {
   flex: 1 1 40em;
   padding: .7rem;
   background-color: #ffede0;
   border-color: #df6c20;
 }

 .cards {
   /* Kartenliste: einfache Flexbox mit Umbruch. */
   display: flex;
   flex-wrap: wrap;
   gap: .7rem;
 }

 .card {
   /* Karte wird je nach Platz ein- oder zweispaltig. */
   flex: 1 1 clamp(15em, calc(40em * 999 - 100% * 999), 100%);
   display: flex;
   flex-wrap: wrap;
   background: oklch(0.95 0.01 235);
   border-radius: 0 .5rem .5rem;
   border: thin solid steelblue;
 }

 .card > * { flex: 1 1 15em; }

 .card .content { padding: .7rem; }

 .card .img {
   /* Platzhalter für ein Bild */
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   aspect-ratio: 16 / 9;
   font-size: 3rem;
   border-radius: 0 .45rem .45rem;
   color: white;
   background:
     linear-gradient(135deg, rgb(24 107 151 /.4), rgb(46 166 143 /.7)),
     repeating-linear-gradient(45deg, rgb(255 255 255 /.5) 0 .7rem, transparent .7rem 1.4rem);
 }
 .card:nth-child(2) .img { background-color: #8DC3A8; }
 .card:nth-child(3) .img { background-color: #70A0C9; }

 .card h2 { margin-top: .5rem; }

 /* Resizer */
 body{
 	container-type: inline-size;
 	resize: horizontal;
 	overflow: auto;
 	border: thin dotted;
 	padding: 1rem;
 }
 
 html { padding: 1em; }

</style>

</head>

<body>

<header>

Flexbox-Layout - Cards ohne Media-Queries

</header>

<article> 

   <section class="card">
Bild

Karte 1: Titel

Diese Karten erscheinen je nach Breite des Viewports in 4 unterschiedlichen Anordnungen.

Sehr breit: 3 Karten nebeneinander, jede Karte einspaltig.

   </section>

   <section class="card">
Bild

Karte 2: Titel

Bei weniger breitem Viewport: Oben 2 Karten nebeneinander einspaltig, darunter 1 Karte zweispaltig.

Bei mittlerer Breite: Alle Karten übereinander, zweispaltig.

   </section>

   <section class="card">
Bild

Karte 3: Titel

In sehr schmalem Viewport wird alles einspaltig dargestellt.

   </section>

</article>

</body> </html>

Abgerufen am 15.06.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Flex-Layout-3.html"