0Pricing
CSS Academy · Lektion

Block- und Inline-Richtungen

Lernen Sie die Richtungen des Block- und Inline-Flows kennen und wie sie den vertikalen und horizontalen Achsen zugeordnet werden.

Block- und Inline-Richtungen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Blockrichtung

Die Blockrichtung ist die Richtung, in der Block-Level-Boxen angeordnet werden. In horizontalen Schriftsystemen (LTR/RTL) verläuft die Blockrichtung von oben nach unten. In vertikalen Schreibmodi ändert sie sich in eine Richtung von links nach rechts oder von rechts nach links.

Inline-Richtung

Die Inline-Richtung ist die Richtung, in der Text innerhalb einer Zeile fließt. In LTR-Sprachen verläuft die Inline-Richtung von links nach rechts. Bei RTL verläuft sie von rechts nach links. In vertikalen Schreibmodi verläuft sie von oben nach unten.

Die Eigenschaft writing-mode

writing-mode legt die grundlegende Ausrichtung des Textflusses fest:

  • horizontal-tb – horizontaler Text, von oben nach unten (Standard)
  • vertical-rl – vertikaler Text, Spalten von rechts nach links
  • vertical-lr – vertikaler Text, Spalten von links nach rechts

Horizontales Schriftsystem

Bei writing-mode: horizontal-tb (Standard) gilt:

  • Blockrichtung = vertikal (oben → unten)
  • Inline-Richtung = horizontal (von links → rechts bei LTR, von rechts → links bei RTL)
  • Block-start = oben, block-end = unten
  • Inline-start = links (LTR) oder rechts (RTL)

Vertikales Schriftsystem

Bei writing-mode: vertical-rl gilt:

  • Blockrichtung = horizontal (rechts → links)
  • Inline-Richtung = vertikal (oben → unten)
  • Block-start = rechts, block-end = links
  • Inline-start = oben, inline-end = unten

Die Achsen veranschaulichen

Stellen Sie sich ein Koordinatensystem vor, das sich mit dem Schreibmodus dreht. Logische Eigenschaften beschreiben Positionen relativ zu diesem drehbaren System und nicht relativ zum festen Bildschirm.

text-orientation

In vertikalen Schreibmodi steuert text-orientation, wie einzelne Zeichen ausgerichtet werden:

  • mixed: Lateinische Zeichen drehen; CJK-Zeichen aufrecht lassen
  • upright: Alle Zeichen aufrecht (für vertikales CJK)
  • sideways: Alle Zeichen seitlich drehen

Seitlich gedrehte vertikale Beschriftungen

Eine praktische Anwendung: gedrehte Beschriftungen an Seitenleisten oder Achsenbeschriftungen von Diagrammen in Kontexten mit horizontaler Schreibweise:

<div class="chart-label">Revenue</div>

Schreibmodi mischen

Ein Container kann einen Schreibmodus besitzen, während einzelne Inline-Elemente einen anderen verwenden. Dies wird genutzt, um lateinischen und CJK-Text im selben Absatz zu mischen.

Block-size und Inline-size

Logische Entsprechungen für Breite und Höhe:

  • inline-size = Breite bei horizontal-tb (die Inline-Dimension)
  • block-size = Höhe bei horizontal-tb (die Block-Dimension)
<div class="box">inline-size sets the width in LTR</div>

Die Eigenschaft text-combine-upright

Bei vertikalem Text, der Zahlen oder Abkürzungen enthält, hält text-combine-upright (tcy) kurze Zeichenfolgen aufrecht und komprimiert sie innerhalb einer einzigen vertikalen Textzelle.

Schnelltest

Welche Achse ist bei writing-mode: horizontal-tb und einer LTR-Sprache die „Block“-Achse?

Zusammenfassung

Die Blockachse ist die Anordnungsrichtung von Blockboxen, die Inline-Achse ist die Richtung des Textflusses. In horizontalen Schriftsystemen verläuft der Block vertikal und die Inline-Richtung horizontal. Bei vertikaler Schreibweise werden diese Richtungen vertauscht. writing-mode steuert die grundlegende Ausrichtung der Achsen. Logische Eigenschaften passen sich an die jeweils aktuellen Block- und Inline-Achsen an.

Häufig gestellte Fragen

Ist die Lektion „Block- und Inline-Richtungen“ kostenlos?

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

Was lerne ich in „Block- und Inline-Richtungen“?

Lernen Sie die Richtungen des Block- und Inline-Flows kennen und wie sie den vertikalen und horizontalen Achsen zugeordnet werden. Du übst CSS 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 CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS 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 2 von 4.

Wie lange dauert die Lektion „Block- und Inline-Richtungen“?

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 CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS 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. Warum logische Eigenschaften: Internationalisierung
  2. Block- und Inline-Richtungen
  3. Logische Eigenschaften für Margin, Padding und Border
  4. Logische Eigenschaften in RTL-Layouts
← Zurück zu CSS Academy