Flexbox Responsive

Flexbox eignet sich gut für responsive Layouts, weil du die Anordnung der Items mit wenigen Eigenschaften anpassen kannst. Zusammen mit Media Queries passt du Flexbox-Layouts an verschiedene Bildschirmgrößen an – am besten im Mobile-First-Ansatz: zuerst das kleine Layout, dann Erweiterungen für größere Screens.

flex-wrap und flexible Breiten

Mit flex-wrap: wrap brechen Items automatisch in die nächste Zeile um, wenn der Platz nicht reicht. Kombiniert mit flex: 1 1 250px entstehen responsive Karten: Auf dem Handy oft eine Spalte, auf dem Desktop mehrere nebeneinander.

1.card-grid {
2    display: flex;
3    flex-wrap: wrap;
4    gap: 1rem;
5}
6
7.card {
8    flex: 1 1 250px;
9}

Richtung mit Media Queries ändern

Häufig stehen Elemente auf dem Handy untereinander und ab Tablet oder Desktop nebeneinander. Dafür startest du mit flex-direction: column und wechselst ab einem Breakpoint zu flex-direction: row.

1/* Mobile: untereinander */
2.layout {
3    display: flex;
4    flex-direction: column;
5    gap: 1rem;
6}
7
8/* Ab Tablet: nebeneinander */
9@media (min-width: 768px) {
10    .layout {
11        flex-direction: row;
12    }
13
14    .sidebar {
15        flex: 0 0 250px;
16    }
17
18    .content {
19        flex: 1;
20    }
21}

Die Sidebar behält mit flex: 0 0 250px eine feste Breite, der Hauptinhalt mit flex: 1 füllt den restlichen Platz.

Navigation responsive umbauen

Navigationen sind ein klassisches Beispiel: Auf dem Handy Links untereinander, auf dem Desktop in einer Zeile verteilt. Dafür reichen oft flex-direction, justify-content und align-items.

1.nav {
2    display: flex;
3    flex-direction: column;
4    gap: 0.5rem;
5}
6
7@media (min-width: 768px) {
8    .nav {
9        flex-direction: row;
10        justify-content: space-between;
11        align-items: center;
12    }
13}

Tipps für responsive Flexbox

• Mobile First – Basis-Styles für kleine Screens, Erweiterungen mit min-width
• gap statt margin – gleichmäßige Abstände ohne extra Abstand am Rand
• flex-wrap – für Karten, Tags und Button-Gruppen, die umbrechen sollen
• flex: 1 – für Spalten, die den verfügbaren Platz teilen
• flex: 0 0 … – für feste Bereiche wie Sidebars oder Logos