CSS Academy · Les

Block- en inline-richtingen

Leer de block- en inline-flowrichtingen en hoe deze worden gekoppeld aan de verticale en horizontale assen.

Les 2 van 413 stappen

Block- en inline-richtingen is een gratis CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.

Blokr richting

De blokrichting is de richting waarin blokniveauvakken worden gestapeld. In horizontale schrijfsystemen (LTR/RTL) loopt de blokrichting van boven naar beneden. In verticale schrijfmodi verandert deze in een richting van links naar rechts of van rechts naar links.

Inline-richting

De inline-richting is de richting waarin tekst binnen een regel loopt. In LTR-talen loopt de inline-richting van links naar rechts. Bij RTL loopt deze van rechts naar links. In verticale schrijfmodi loopt deze van boven naar beneden.

De eigenschap writing-mode

writing-mode stelt de basisoriëntatie van de tekststroom in:

  • horizontal-tb — horizontale tekst, van boven naar beneden (standaard)
  • vertical-rl — verticale tekst, kolommen van rechts naar links
  • vertical-lr — verticale tekst, kolommen van links naar rechts

Horizontaal schrijfsysteem

Bij writing-mode: horizontal-tb (standaard):

  • Blokrichting = verticaal (van boven → naar beneden)
  • Inline-richting = horizontaal (van links → naar rechts bij LTR, van rechts → naar links bij RTL)
  • Block-start = boven, block-end = onder
  • Inline-start = links (LTR) of rechts (RTL)

Verticaal schrijfsysteem

Bij writing-mode: vertical-rl:

  • Blokrichting = horizontaal (van rechts → naar links)
  • Inline-richting = verticaal (van boven → naar beneden)
  • Block-start = rechts, block-end = links
  • Inline-start = boven, inline-end = onder

De assen visualiseren

Zie het als een coördinatensysteem dat meedraait met de schrijfrichting. Logische eigenschappen beschrijven posities ten opzichte van dit draaibare systeem, niet ten opzichte van het vaste scherm.

text-orientation

In verticale schrijfmodi bepaalt text-orientation hoe afzonderlijke tekens worden georiënteerd:

  • mixed: draai Latijnse tekens; houd CJK-tekens rechtop
  • upright: houd alle tekens rechtop (voor verticaal CJK)
  • sideways: draai alle tekens zijwaarts

Zijwaartse verticale labels

Een praktisch gebruik: gedraaide labels in een zijbalk of labels van diagramassen in contexten met horizontaal schrijven:

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

Schrijfmodi combineren

Een container kan één schrijfmodus hebben, terwijl afzonderlijke inline-elementen een andere hebben. Dit wordt gebruikt om Latijnse en CJK-tekst in dezelfde alinea te combineren.

Block-size en inline-size

Logische equivalenten voor breedte en hoogte:

  • inline-size = breedte bij horizontal-tb (de inline-afmeting)
  • block-size = hoogte bij horizontal-tb (de blokafmeting)
<div class="box">inline-size sets the width in LTR</div>

De eigenschap text-combine-upright

Voor verticale tekst met getallen of afkortingen houdt text-combine-upright (tcy) korte reeksen tekens rechtop en samengedrukt binnen één verticale tekstcel.

Korte controle

Welke as is bij writing-mode: horizontal-tb met een LTR-taal de as voor blokken?

Samenvatting

De blokas is de stapelrichting voor blokvakken; de inline-as is de richting waarin tekst loopt. In horizontale schrijfsystemen is blok = verticaal en inline = horizontaal. Bij verticaal schrijven draaien deze om. writing-mode bepaalt de basisoriëntatie van de assen. Logische eigenschappen passen zich aan aan de huidige blok- en inline-assen.

Gratis beginnen

Leer CSS met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
40
Lessen
159

Veelgestelde vragen

Is de les “Block- en inline-richtingen” gratis?

Ja — de volledige tekst van “Block- en inline-richtingen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.

Wat leer ik in “Block- en inline-richtingen”?

Leer de block- en inline-flowrichtingen en hoe deze worden gekoppeld aan de verticale en horizontale assen. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met CSS Academy te beginnen?

Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Block- en inline-richtingen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over CSS Academy?

Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Waarom logische properties: internationalisering
  2. Block- en inline-richtingen
  3. Logische margin, padding en border
  4. Logische properties in RTL-layouts
← Terug naar CSS Academy