0Pricing
Frontend Academy · Lektion

Display: Grundlagen von block, inline, flex und grid

Wechseln Sie zwischen display-Werten und sehen Sie, wie block, inline, flex und grid Inhalte jeweils anders anordnen.

Display: Grundlagen von block, inline, flex und grid ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Die display-Eigenschaft

Die Eigenschaft display ist die wichtigste CSS-Eigenschaft für Layouts. Sie steuert, wie ein Element am Layoutfluss teilnimmt und wie seine untergeordneten Elemente angeordnet werden. Die am häufigsten verwendeten Werte sind: block, inline, inline-block, flex, grid und none.

display: block

Blockelemente nehmen die gesamte Breite ihres Containers ein und beginnen in einer neuen Zeile. Beispiele: <div>, <p>, <h1>. Bei Blockelementen können Sie Breite, Höhe, Außen- und Innenabstände festlegen.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Inline-Elemente fließen innerhalb des Textes – sie beginnen keine neue Zeile. Beispiele: <span>, <a>, <strong>. Breite, Höhe und vertikale Außenabstände haben bei Inline-Elementen keine Wirkung.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block kombiniert beides: Das Element fließt inline (wie Text), akzeptiert aber Breite, Höhe und vertikale Außenabstände (wie ein Block). Das ist nützlich für Buttons und Badges, die in einer Textzeile stehen sollen.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none entfernt das Element vollständig aus dem Layout – es nimmt keinen Platz ein. Verwenden Sie visibility: hidden, um es auszublenden und dabei den belegten Platz zu erhalten.

Flexbox – Eindimensionales Layout

display: flex macht ein Element zu einem Flex-Container. Seine direkten untergeordneten Elemente werden zu Flex-Items, die standardmäßig entlang einer Zeile oder alternativ entlang einer Spalte angeordnet werden. Flexbox eignet sich hervorragend zum Verteilen von Platz und Ausrichten von Elementen.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Wichtige Flexbox-Eigenschaften

flex-direction: row | column. justify-content: space-between | center | flex-end. align-items: center | flex-start | flex-end | stretch. gap: Abstand zwischen Elementen, ohne margin zu verwenden.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid – Zweidimensionales Layout

display: grid macht ein Element zu einem Grid-Container. Mit grid-template-columns und grid-template-rows definieren Sie Zeilen und Spalten. Grid eignet sich ideal für Seitenlayouts und Kartenraster.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Die fr-Einheit

Die Einheit fr (Bruchteil) verteilt den verfügbaren Platz. grid-template-columns: 1fr 2fr 1fr erzeugt drei Spalten, wobei die mittlere doppelt so viel Platz wie die anderen erhält.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Flex und Grid auswählen

Verwenden Sie Flexbox für eindimensionale Layouts (eine Reihe von Buttons, einen Stapel von Karten). Verwenden Sie Grid für zweidimensionale Layouts (ein Seitengrundgerüst, eine Fotogalerie mit expliziten Zeilen und Spalten). Beide können auf derselben Seite gemeinsam verwendet werden.

display: none vs visibility: hidden

display: none: entfernt das Element aus dem Layout und macht es für Screenreader nicht zugänglich. visibility: hidden: unsichtbar, nimmt aber weiterhin Platz ein und bleibt im Barrierefreiheitsbaum. opacity: 0: unsichtbar, nimmt weiterhin Platz ein und ist zugänglich.

Schnelltest

Sie müssen ein responsives Kartenraster mit mehreren Zeilen und Spalten anordnen. Mit welchem display-Wert sollten Sie am besten beginnen?

Zusammenfassung: display-Werte

block nimmt die gesamte Breite ein. inline fließt mit dem Text. inline-block vereint beides. flex ordnet untergeordnete Elemente eindimensional an. grid ordnet untergeordnete Elemente zweidimensional an. none entfernt Elemente aus dem Layout. Wenn Sie diese Werte beherrschen, können Sie jedes Layout im Web steuern.

Häufig gestellte Fragen

Ist die Lektion „Display: Grundlagen von block, inline, flex und grid“ kostenlos?

Ja — der vollständige Text von „Display: Grundlagen von block, inline, flex und grid“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Display: Grundlagen von block, inline, flex und grid“?

Wechseln Sie zwischen display-Werten und sehen Sie, wie block, inline, flex und grid Inhalte jeweils anders anordnen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Display: Grundlagen von block, inline, flex und grid“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Selektoren und die Cascade
  2. Farben, Typografie und das Box-Modell
  3. Display: Grundlagen von block, inline, flex und grid
  4. Positionierung: relative, absolute, fixed, sticky
← Zurück zu Frontend Academy