Atrybut flex-direction w CSS

Definicja i użycie

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

Komentarz:Jeśli element nie jest projektem elastycznym, to właściwość flex jest nieważna.

Zobacz również:

CSS Kurs:CSS Flexbox

Podręcznik CSS:Atrybut flex

Podręcznik CSS:Atrybut flex-basis

Podręcznik CSS:Atrybut flex-flow

Podręcznik CSS:Atrybut flex-grow

Podręcznik CSS:Atrybut flex-shrink

Podręcznik CSS:Atrybut flex-wrap

Podręcznik HTML DOM:Atrybut flexDirection

Przykład

Ustawia kierunek elementów elastycznych wewnątrz elementu <div> w przeciwnym kierunku:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Spróbuj sam

Gramatyka CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Wartość atrybutu

Wartość Opis
row Domyślna wartość. Jako wiersz, poziomo wyświetla elementy elastyczne.
row-reverse Równoważne wiersze, ale w przeciwnym kierunku.
column Jako kolumny, wertykalnie wyświetla elementy elastyczne.
column-reverse Równoważne kolumny, ale w przeciwnym kierunku.
initial Ustawia tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: row
Dziedziczenie: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.flexDirection="column-reverse"

Więcej przykładów

Używając flex-direction i zapytań media tworzy różne układy dla różnych rozmiarów ekranu lub urządzeń:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Projekt responsywny - tworzenie układu jedno-wierszowego (100%) zamiast dwu-wierszowego (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Spróbuj sam

Wsparcie przeglądarki

Liczby w tabeli podają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Liczby z -webkit- lub -moz- oznaczają pierwszą wersję używającą prefiksu.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0