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 Flex Items


Kinderelemente (Items)

Die direkte kinderelemente van 'n buigbare houer word outomaties buigsame (buig) items.

1

2

3

4

Die element hierbo verteenwoordig vier blou buig items binne 'n grys buig houer.

Voorbeeld

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

Die flex item eienskappe is:


Die bestelling Eiendom

Die ordereiendom spesifiseer die volgorde van die buigitems.

1

2

3

4

Die eerste flex-item in die kode hoef nie as die eerste item in die uitleg te verskyn nie.

Die bestelwaarde moet 'n getal wees, verstekwaarde is 0.

Voorbeeld

Die order -eienskap kan die volgorde van die flex items verander:

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>


Die flex-grow Property

Die flex-groweiendom spesifiseer hoeveel 'n flex-item sal groei relatief tot die res van die flex-items.

1

2

3

Die waarde moet 'n getal wees, verstekwaarde is 0.

Voorbeeld

Laat die derde buig-item agt keer vinniger groei as die ander buig-items:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>


Die buig-krimp Eiendom

Die flex-shrinkeiendom spesifiseer hoeveel 'n flex-item sal krimp relatief tot die res van die flex-items.

1

2

3

4

5

6

7

8

9

10

Die waarde moet 'n getal wees, verstekwaarde is 1.

Voorbeeld

Moenie dat die derde buig-item soveel krimp soos die ander buig-items nie:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>


Die flex-basis Eiendom

Die flex-basiseiendom spesifiseer die aanvanklike lengte van 'n buigitem.

1

2

3

4

Voorbeeld

Stel die aanvanklike lengte van die derde buigitem op 200 pixels:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>


Die flex Property

Die flexeiendom is 'n snelskrif-eiendom vir die flex-grow, flex-shrink, en flex-basiseiendomme.

Voorbeeld

Maak die derde buig-item nie groeibaar (0), nie krimpbaar (0) en met 'n aanvanklike lengte van 200 pixels:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>


Die belyn-self Eiendom

Die align-selfeiendom spesifiseer die belyning vir die geselekteerde item binne die buigsame houer.

Die align-self eiendom ignoreer die verstekbelyning wat deur die houer se align-itemseiendom gestel is.

1

2

3

4

In hierdie voorbeelde gebruik ons ​​'n 200 pixels hoë houer, om die align-selfeienskap beter te demonstreer:

Voorbeeld

Belyn die derde buig-item in die middel van die houer:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Voorbeeld

Belyn die tweede buig-item aan die bokant van die houer, en die derde buig-item aan die onderkant van die houer:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>


Die CSS Flexbox Items Eienskappe

Die volgende tabel lys al die CSS Flexbox Items-eienskappe:

Property Description
align-self Specifies the alignment for a flex item (overrides the flex container's align-items property)
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basis Specifies the initial length of a flex item
flex-grow Specifies how much a flex item will grow relative to the rest of the flex items inside the same container
flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container
order Specifies the order of the flex items inside the same container