Web Development
Layout und Responsive Design
Flexbox, Container, flexible Bilder, responsive Layouts und Anpassung an verschiedene Bildschirmgrößen.
Layout und Responsive Design
Webseiten werden auf vielen Geräten genutzt: Smartphone, Tablet, Laptop, Desktop, Smartwatch oder großen Displays. Responsive Design sorgt dafür, dass Inhalte auf unterschiedlichen Bildschirmgrößen gut funktionieren.
Flexbox
Flexbox ist ein CSS-Layout-Modell für flexible Anordnungen.
Ein Container wird mit display: flex aktiviert:
.container {
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
}
Wichtige Begriffe:
| Begriff | Bedeutung |
|---|---|
| Flex Container | Element mit display: flex |
| Flex Items | direkte Kindelemente im Container |
| Hauptachse | Richtung der Anordnung |
| Querachse | Achse senkrecht zur Hauptachse |
Wichtige Flex-Eigenschaften
| Eigenschaft | Zweck |
|---|---|
flex-direction | Richtung: row oder column |
justify-content | Ausrichtung auf der Hauptachse |
align-items | Ausrichtung auf der Querachse |
gap | Abstand zwischen Elementen |
flex-wrap | Umbruch erlauben |
Flexible Bilder
Bilder sollten sich an den Container anpassen:
img {
max-width: 100%;
height: auto;
}
Damit werden Bilder nicht breiter als ihr Container.
Container und maximale Breite
Eine Seite wirkt oft professioneller, wenn Inhalte nicht über die gesamte Bildschirmbreite laufen.
main {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
Responsive Denken
Prüfe bei Layouts:
- Funktioniert die Navigation auf kleinen Screens?
- Werden Karten oder Spalten sinnvoll untereinander angeordnet?
- Sind Buttons groß genug?
- Bleiben Texte lesbar?
- Werden Bilder nicht verzerrt?
- Gibt es genug Abstand zwischen klickbaren Elementen?
Responsive Design ist nicht nur "kleiner machen". Es bedeutet, Inhalte je nach Gerät sinnvoll neu anzuordnen.
Zuletzt aktualisiert: 6. Juni 2026