Flexbox wyświetlanie kolumn – zmiana kolejności i rozmiarów (flex-direction, order, flex-grow) [CSS]

tutoriale

Kategoria wpisu Flexbox, PHP, HTML, CSS Tagi: , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

We wcześniejszym wpisie pokazałam wam jak ustawić proste kolumny z zastosowaniem metody flexbox. W kolejnym kroku będziemy testować ich ustawienia.

Flexbox właściwość flex-direction

Naszą pracę zaczniemy od właściwości: flex-direction

Przymuje ona wartości:

  • column – stawia elementy w kolumny
  • column-reverse – odwraca kolejność w kolumnie
  • row (domyślna) – elementy obok siebie
  • row-reverse – w odwróconej kolejności elementy obok siebie

Domyślną wartością (czyli taką której nie musimy ustawiać) jest row:

kol 1
kol 2
kol 3

Podstawowe ustawienia CSS:

A tak działają pozostałe ustawienia:

Na początek odwrócimy kolejność wyświetlanych elementów

kol 1
kol 2
kol 3

Następnie ustawimy elementy jeden pod drugim:

kol 1
kol 2
kol 3

Teraz na koniec odwrócimy ich kolejność

kol 1
kol 2
kol 3

Flexbox właściwość Order

Z pomocą właściwości „order” możemy dowolnie zmieniać kolejność elementu np:

W efekcie otrzymamy zmienioną kolejność:

kol 1
kol 2
kol 3
kol 4

Flexbox właściwość flex-grow

Z pomocą właściwości flex-grow możemy wpływać na rozmiary elementów. W domyślnych ustawieniach wszystkie elementy mają taką samą szerokość – jednak rzadko kiedy tak naprawdę potrzebujemy wszystkie „idealnie” równe obiekty. Dzięki flex-grow możemy zadecydować o tym, który element ma mieć jakie wymiary:

kol 1
kol 2
kol 3
kol 4

Experyment: Jak to wygląda w % (max=100%)

kol 1
kol 2
kol 3
kol 4

źródło:
https://www.w3schools.com/css/css3_flexbox.asp

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *