Właściwość CSS flex-direction

Definicja stylu, przeznaczenie i użycie flex-direction

Właściwość flex-direction określa kierunek elementów elastycznych.

Uwaga: Jeśli element nie jest elementem elastycznym, właściwość flex-direction nie działa.

Wartość	Opis
row	Elastyczne elementy są wyświetlane poziomo, jako wiersz. Domyślna wartość.
row-reverse	To samo co wartość row, lecz w odwrotnej kolejności.
column	Elastyczne elementy są wyświetlane pionowo jako kolumna.
column-reverse	To samo co wartość column, lecz w odwrotnej kolejności.
initial	Ustawia tę właściwość na jej wartość domyślną.
inherit	Dziedziczy tę właściwość z elementu nadrzędnego.

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit- i -moz- określa pierwszą wersję, która działała z prefiksem.

Właściwość
flex-direction	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Właściwość CSS:

Rezultat:

Kod CSS:

#main {
  display: flex;
  flex-direction: row;
}