De eigenschap flex-direction

De eigenschap flex-direction bepaalt de richting van de hoofd- en kruisas of, met andere woorden, plaatst elementen in een rij of in een kolom.

Van toepassing op het ouderelement voor flex containers. Maakt deel uit van de samengestelde eigenschap flex-flow.

Syntaxis

cssselector {
  flex-direction: row | row-reverse | column | column-reverse;
}

Waarde	Beschrijving
`row`	De hoofdas loopt van links naar rechts. Elementen zijn in een rij geplaatst, standaard tegen de linkerkant aan, hun nummering heeft de gebruikelijke volgorde - van links naar rechts.
`row-reverse`	De hoofdas loopt van rechts naar links. Elementen zijn in een rij geplaatst, standaard tegen de rechterkant aan, hun nummering heeft de omgekeerde volgorde - van rechts naar links.
`column`	De hoofdas loopt van boven naar beneden. Elementen zijn in een kolom geplaatst, standaard tegen de bovenkant aan, hun nummering heeft de gebruikelijke volgorde - van boven naar beneden.
`column-reverse`	De hoofdas loopt van beneden naar boven. Elementen zijn in een kolom geplaatst, standaard tegen de onderkant aan, hun nummering heeft de omgekeerde volgorde - van beneden naar boven.

Standaardwaarde: row.

Elementen zijn in een rij geplaatst, standaard tegen de linkerkant aan, hun nummering heeft de gebruikelijke volgorde - van links naar rechts:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Elementen zijn in een rij geplaatst, standaard tegen de rechterkant aan, hun nummering heeft de omgekeerde volgorde - van rechts naar links:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Elementen zijn in een kolom geplaatst, standaard tegen de bovenkant aan, hun nummering heeft de gebruikelijke volgorde - van boven naar beneden:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Elementen zijn in een kolom geplaatst, standaard tegen de onderkant aan, hun nummering heeft de omgekeerde volgorde - van beneden naar boven:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

de eigenschap justify-content,
die de uitlijning op de hoofdas bepaalt
de eigenschap align-items,
die de uitlijning op de kruisas bepaalt
de eigenschap flex-wrap,
die de meerdere rijen voor flex containers bepaalt
de eigenschap flex-flow,
samengestelde eigenschap voor flex-direction en flex-wrap
de eigenschap order,
die de volgorde van flex items bepaalt
de eigenschap align-self,
die de uitlijning van een enkel item bepaalt
de eigenschap flex-basis,
die de grootte van een specifiek flex item bepaalt
de eigenschap flex-grow,
die de "gulzigheid" van flex items bepaalt
de eigenschap flex-shrink,
die de krimpbaarheid van flex items bepaalt
de eigenschap flex,
samengestelde eigenschap voor flex-grow, flex-shrink en flex-basis