CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS Flexbox


1

2

3

4

5

6

7

8


CSS Flexbox-uitlegmodule

Voor die Flexbox-uitlegmodule was daar vier uitlegmodusse:

  • Blok, vir afdelings in 'n webblad
  • Inlyn, vir teks
  • Tabel, vir tweedimensionele tabeldata
  • Geposisioneer, vir eksplisiete posisie van 'n element

Die buigsame boksuitlegmodule maak dit makliker om buigsame responsiewe uitlegstruktuur te ontwerp sonder om vlot of posisionering te gebruik.


Blaaierondersteuning

Die flexbox-eienskappe word in alle moderne blaaiers ondersteun.

29.0 11.0 22.0 10 48

Flexbox Elemente

Om die Flexbox-model te begin gebruik, moet jy eers 'n flex-houer definieer.

1

2

3

Die element hierbo verteenwoordig 'n buighouer (die blou area) met drie buigitems.

Voorbeeld

'n Buighouer met drie buigitems:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Jy sal meer leer oor buighouers en buigitems in die volgende hoofstukke.