Proprietà flex-direction

La proprietà flex-direction imposta la direzione dell'asse principale e trasversale o, in altre parole, dispone gli elementi in riga o in colonna.

Si applica all'elemento genitore per i flex container. È inclusa nella proprietà shorthand flex-flow.

Sintassi

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

Valori

Valore di default: row.

Esempio

Gli elementi sono disposti in riga, per default allineati al bordo sinistro, la loro numerazione ha un ordine normale - da sinistra a destra:

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

Результат:

Esempio . Valore row-reverse

Gli elementi sono disposti in riga, per default allineati al bordo destro, la loro numerazione ha un ordine inverso - da destra a sinistra:

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

Результат:

Esempio . Valore column

Gli elementi sono disposti in colonna, per default allineati in alto, la loro numerazione ha un ordine normale - dall'alto verso il basso:

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

Результат:

Esempio . Valore column-reverse

Gli elementi sono disposti in colonna, per default allineati in basso, la loro numerazione ha un ordine inverso - dal basso verso l'alto:

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

Результат:

Vedi anche