CSS flex-richting eigenschap

Definitie en gebruik

De eigenschap flex-direction bepaalt de richting van de elastische items.

Opmerking:Als een element geen elastisch item is, is de flex-eigenschap ongeldig.

Zie ook:

CSS handleiding:CSS flexbox

CSS handleiding:flex eigenschap

CSS handleiding:flex-basis eigenschap

CSS handleiding:flex-flow eigenschap

CSS handleiding:flex-grow eigenschap

CSS handleiding:flex-shrink eigenschap

CSS handleiding:flex-wrap eigenschap

HTML DOM handleiding:flexDirection eigenschap

Voorbeeld

Stel de richting van de flexibele items binnen het <div>-element in omgekeerde volgorde in:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Probeer het zelf

CSS syntaxis

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
row Standaardwaarde. Als rij, horizontaal weergegeven van de flexibele items.
row-reverse Gelijke rijen, maar in de tegenovergestelde richting.
column Als kolom, verticaal weergegeven van de flexibele items.
column-reverse Gelijke kolommen, maar in de tegenovergestelde richting.
initial Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap overnemen van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: row
Inheritantie: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.flexDirection="column-reverse"

Meer voorbeelden

Gebruik flex-direction en media queries om verschillende lay-outs voor verschillende schermgroottes of apparaten te maken:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Responsieve lay-out - maak een enkele kolom lay-out (100%) in plaats van een dubbele kolom lay-out (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Probeer het zelf

Browserondersteuning

De getallen in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Getallen met -webkit- of -moz- voorafgaand vertegenwoordigen de eerste versie die het voorvoegsel gebruikt.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0