Beispiel:Flex-Layout-5.html
Aus SELFHTML-Wiki
<!doctype html> <html lang="de"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox-Layout responsiv ohne Media-Queries</title>
<style>
* { box-sizing: border-box; }
body {
/* Grundlayout: Kopf, Inhalt und Fuß untereinander. */
display: flex;
flex-direction: column;
gap: 1rem;
min-height: 100dvh;
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;
}
nav {
background-color: #fffbf0;
border-color: #e7c157;
padding: 0;
}
nav ul {
--nav-gap: .7rem;
/* Grenze für 4 Elemente in einer Zeile. */
--nav-four-cols: calc(12em * 4 + var(--nav-gap) * 3);
display: flex;
flex-wrap: wrap;
gap: var(--nav-gap);
margin: 0;
padding: .7rem;
}
nav li {
/* 4 nebeneinander, dann 2 x 2, dann einspaltig. */
flex: 1 1 clamp(12em, calc((var(--nav-four-cols) - 100%) * 999), calc((100% - var(--nav-gap)) / 2));
min-inline-size: min(100%, 12em);
list-style-type: none;
background-color: gold;
border: thin solid oklch(0.60 0.1 95);
}
nav li:hover,
nav li:focus-within { background-color: oklch(0.98 0.1 95) }
nav a {
display: block;
padding: 1rem;
font-weight: bold;
}
main {
/* Inhaltsbereich: article und aside stehen nebeneinander oder umbrechen. */
display: flex;
flex-wrap: wrap;
gap: 1rem;
flex: 5;
}
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; }
aside {
flex: 1 1 14em;
padding: .7rem;
background-color: #ebf5d7;
border-color: #8db243;
}
.form-container {
/* Formularfelder untereinander. */
display: flex;
flex-direction: column;
gap: .7rem;
}
.form-group {
/* Beschriftung + Eingabefeld: nebeneinander, sonst untereinander. */
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .7rem;
inline-size: min(100%, 30rem);
}
.form-group > label { flex: 1 1 5rem; }
.form-group > :not(label) { flex: 1 1 15rem; }
.form-group button {
flex: 1 1 100%;
min-block-size: 3em;
}
form * { font: inherit; }
input,
textarea { padding: .3rem; }
footer {
/* Text horizontal + vertikal zentrieren. */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .7rem;
padding: 1.2rem;
background-color: oklch(0.95 0.01 235);
border-color: steelblue;
}
footer div {
flex: 1 1 12em;
text-align: center;
}
</style>
</head>
<body>
<header>
<img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="Logo SELFHTML">
Flexbox-Layout responsiv ohne Media-Queries
</header>
<nav>
- <a href="#">nav ul li: Eins</a>
- <a href="#">Zwei</a>
- <a href="#">Drei</a>
- <a href="#">Vier</a>
</nav>
<main>
<article>
Inhaltsverzeichnis
Article: Inhalt
Sections: Karten im Wrapper .cards
<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>
<section>
Section: Titel
Weitere Sections nach Bedarf.
</section>
</article>
<aside>
Aside: Formular
Je nach verfügbarer Breite werden die Beschriftungen über oder neben den Eingabefeldern platziert.
<form class="form-container">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="vorname">Vorname</label>
<input type="text" id="vorname" name="vorname">
<label for="email">E-Mail</label>
<input type="email" id="email" name="email">
<label for="nachricht">Nachricht</label>
<textarea id="nachricht" name="nachricht" rows="6"></textarea>
<button type="submit">Nichts absenden</button>
</form>
</aside>
</main>
<footer>
Footer:
<a href="#">Impressum</a>
© 2026 SELFHTML
</footer>
</body> </html>
