Właściwość flex-direction odpowiada za określenie kierunku, w którym mają zostać skierowane, wyświetlone kolumny (elementy) na stronie internetowej. 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:
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.