Egenskaben flex-direction

Egenskaben flex-direction indstiller retningen af hoved- og tværaksen eller, med andre ord, placerer elementer i en række eller kolonne.

Anvendes på forældreelementet for flex containere. Indgår i sammentrukket egenskab flex-flow.

Syntaks

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

Værdier

Standardværdi: row.

Eksempel

Elementer er placeret i en række, som standard trykket op mod venstre kant, deres nummerering har den sædvanlige rækkefølge - fra venstre mod højre:

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;
}

Результат:

Eksempel . Værdien row-reverse

Elementer er placeret i en række, som standard trykket op mod højre kant, deres nummerering har omvendt rækkefølge - fra højre mod venstre:

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;
}

Результат:

Eksempel . Værdien column

Elementer er placeret i en kolonne, som standard trykket op mod toppen, deres nummerering har den sædvanlige rækkefølge - ovenfra og nedad:

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;
}

Результат:

Eksempel . Værdien column-reverse

Elementer er placeret i en kolonne, som standard trykket op mod bunden, deres nummerering har omvendt rækkefølge - nedenfra og opad:

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;
}

Результат:

Se også