Kierunek wyświetlania – flex-direction

Reading Time: < 1 minute

Właściwość flex-direction odpowiada za określenie kierunku, w którym mają zostać skierowane, wyświetlone kolumny. W pewnym sensie ma więc podobne działanie do float. Właściwość ta jest o tyle ciekawa, że jeśli chcemy zachować domyślny układ nie musimy jej dodawać. Posiada ona bowiem domyślne ustawienie do lewej strony.

Wartości przyjmowane przez flex-direction

Własność ta pryzmuje wartości:

  • row (domyślna) – elementy obok siebie
  • row-reverse – w odwróconej kolejności elementy obok siebie (ostatni będzie wyświetlał się jako pierwszy, pierwszy jako ostatni)
  • column – ustawia elementy w kolumny (jeden pod drugim)
  • column-reverse – odwraca kolejność w kolumnie (analogicznie jak poprzedni tyle, że na górze znajduje się ostatni element)

A teraz jak to wygląda w praktyce:

/* kontener w którym znajdują się pojedyńcze div tu dodajemy flex-direction */
.flex-container {
  display: flex;
  background-color: darkblue;
  margin-bottom: 15px;
}

/* pojedyńczy div */
.flex-container div {
  background-color: #ccc;
  margin: 10px;
  padding:20px;
  font-size: 30px;
}

Przykład jak mogą być układane elementy w sekcji strony internetowej:

See the Pen flex-direction by Aura (@Julka85) on CodePen.dark

Jak widać powyżej chociaż kolejność elementów w niektórych przykładach uległa zmianie nadal są one w tej samej kolejności. Tylko odwróconej. Tą nieścisłość spowodowaną działaniem flex-direction można naprawić z pomocą order.