#31. Wybieramy kierunek wyświetlania

Właściwość flex-direction

Idąc dalej z modelem flexbox, poznajmy właściwość flex-direction. Odpowiada on za ustawienie kolejności wyświetlania wszystkich elementów w kontenerze. Niezależnie od tego w jaki sposób są one ułożone w kodzie HTML, zawsze możemy zmienić kierunek wyświetlania.

Poznajmy wartości które przyjmuje właściwość flex-direction:

  • row (wartość domyslna) – elementy wyświetlają się horyzontalnie w wierszu – od lewej do prawej,
  • row-reverse – elementy wyświetlają się horyzontalnie w wierszu – od prawej do lewej,
  • column – elementy wyświetlają się w pionie, w kolumnie – jeden pod drugim,
  • column-reverse – elementy wyświetlają się w pionie, w kolumnie – w odwróconej kolejności.

Powyższe wartości dla właściwości flex-direction znajdują między innymi zastosowanie w zarządzaniu kolejnością zdjęć w galerii.

Spójrz na poniższy przykład. Zobrazuję Ci różnice między wartościami:

 

priceless-wilson-dn3kc

priceless-wilson-dn3kc by danielminschinski

Materiał taki poniedziałkowy na rozruszanie💪 Kolejny w środę📅 o właściwości – justify-content oraz align-items😃

Zapraszam do subskrypcji 🔽 i polubienia mojego blogowo/usługowego ▶ fb

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!