Ιδιότητα flex-direction

Η ιδιότητα flex-direction καθορίζει την κατεύθυνση του κύριου και του εγκάρσιου άξονα ή, με άλλα λόγια, τοποθετεί τα στοιχεία σε σειρά ή σε στήλη.

Εφαρμόζεται στο γονικό στοιχείο για flex μπλοκ. Περιλαμβάνεται στη σύντομη ιδιότητα flex-flow.

Σύνταξη

cssεπιλογέας {
  flex-direction: row | row-reverse | column | column-reverse;
}

Τιμές

Προεπιλεγμένη τιμή: row.

Παράδειγμα

Τα στοιχεία τοποθετούνται σε σειρά, από προεπιλογή σφιγμένα στην αριστερή άκρη, η αρίθμησή τους έχει κανονική σειρά - από αριστερά προς τα δεξιά:

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

Результат:

Παράδειγμα . Τιμή row-reverse

Τα στοιχεία τοποθετούνται σε σειρά, από προεπιλογή σφιγμένα στην δεξιά άκρη, η αρίθμησή τους έχει αντίστροφη σειρά - από δεξιά προς τα αριστερά:

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

Результат:

Παράδειγμα . Τιμή column

Τα στοιχεία τοποθετούνται σε στήλη, από προεπιλογή σφιγμένα στην κορυφή, η αρίθμησή τους έχει κανονική σειρά - από πάνω προς τα κάτω:

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

Результат:

Παράδειγμα . Τιμή column-reverse

Τα στοιχεία τοποθετούνται σε στήλη, από προεπιλογή σφιγμένα στον πάτο, η αρίθμησή τους έχει αντίστροφη σειρά - από κάτω προς τα πάνω:

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

Результат:

Δείτε επίσης