tutoriale
|

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

przezAurelia Sypniewska
Czas czytania: 2 minut

Dziś kontynuujemy tematykę związaną z flexbox. We wcześniejszym wpisie pokazałam omówiłam już sposób na to jak ustawić proste kolumny.

Był to jednak dopiero wstęp ułamek z możliwości jakie daje ta technika. I zdecydowania za mało by wykorzystać ją do budowy stron dlatego teraz pokażę w jaki sposób możemy wpływać na ułożenie naszych kolumn. A tym samym zacząć tworzyć pierwsze poważne układy.

flex-direction – kierunek układania elementów, kolumn

Naszą pracę zaczniemy od omówienia właściwości: flex-direction. Właściwość ta odpowiada za określenie kierunku w którym mają zostać skierowane kolumny. Coś zbliżonego do float. Właściwość ta jest o tyle ciekawa, że jeśli chcemy zachować domyślny układ nie musimy jej dodawać.

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 nad 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;
}

See the Pen flex-direction by Aura (@Julka85) on CodePen.dark

Order – kolejność wyświetlania elementów

Z pomocą właściwości „order” możemy dowolnie zmieniać kolejność elementu – umieszczamy ją więc na konkretnym elemencie, który chcemy przemieścić. Czyli w praktyce pozamieniać je miejscami np:


See the Pen order flex by Aura (@Julka85) on CodePen.dark

W przykładzie elementy są ponumerowane – warto na to zwrócić uwagę ponieważ dzięki temu widać gdzie przemieścił się konkretny element. Poniżej macie kod HTML dla 3 przykładu (elementy w CSS mają takie same ustawienia jak wcześniej) myślę, że lepiej pozwoli wam to zwizualizować miejsce gdzie umieszczamy właściwość order 

<div class="flex-container">
    <div style="order:3;">1 kol</div>
    <div style="order:4;">2 kol</div>
    <div style="order:1;">3 kol</div>
    <div style="order:2;">4 kol</div>    
  </div>

flex-grow – zmiana rozmiaru elementu

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:

See the Pen flex-grow by Aura (@Julka85) on CodePen.dark

Właściwość tą również umieszczamy na konkretnym elemencie np:

<div class="flex-container"> 
   <div style="flex-grow:1;">1 kol</div> 
   <div style="flex-grow:3;">2 kol</div> 
   <div style="flex-grow:2;">3 kol</div> 
   <div style="flex-grow:8;">4 kol</div>
 </div>

1 2 3 4 5

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