A flex-direction tulajdonság

A flex-direction tulajdonság beállítja a fő- és keresztirányú tengelyek irányát, vagy más szóval sorba vagy oszlopba rendezi az elemeket.

A flex konténer szülő elemre vonatkozik. Része a flex-flow összetett tulajdonságnak.

Szintaxis

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

Értékek

Alapértelmezett érték: row.

Példa

Az elemek sorba rendeződnek, alapértelmezetten a bal széléhez igazítva, számozásuk a szokásos rendet követi - balról jobbra:

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

Результат:

Példa . row-reverse érték

Az elemek sorba rendeződnek, alapértelmezetten a jobb széléhez igazítva, számozásuk fordított rendet követi - jobbról balra:

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

Результат:

Példa . column érték

Az elemek oszlopba rendeződnek, alapértelmezetten a felső széléhez igazítva, számozásuk a szokásos rendet követi - felülről lefelé:

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

Результат:

Példa . column-reverse érték

Az elemek oszlopba rendeződnek, alapértelmezetten az alsó széléhez igazítva, számozásuk fordított rendet követi - alulról felfelé:

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

Результат:

Lásd még