Podstawy Flexbox

Z pomocą Flexbox możemy manipulować położeniem różnych elementów w obrębie witryny internetowej. Odchodzimy więc od standardowego modelu pudełka i przechodzimy na technologię flex. Gdzie kolumny się rozciągają, wyciagają, zmieniają swoje położenie (podczas wyświetlania), dostosowują do sąsiednich.

Technologia CSS Flexbox jest odpowiedzią na tworzenie nowoczesnych nie ograniczonych stron. Do jej podstawowych parametrów zalicza się właściwości CSS takie jak:

• flex
• order
• flex-grow
• flex-shrink
• flex-basis
• align-self
• flex-direction
• justify-content

Podstawowe użycie Flexbox

Każda witryna internetowa posiada przynajmniej jedną, dwie lub trzy kolumny umieszczone obok siebie. W tradycyjnej metodzie blokowej aby umieścić takie kolumny obok siebie musimy nadać im odpowiednią szerokość oraz ustawić odpowiednio właściwość float (nie nie podam parametrów).

W kodzie HTML różnica w wyglądzie między metodami jak widać nie istnieje – w taki sam sposób dodawali byśmy elementy w metodzie blokowej.

<div class="flex-container">
  <div>kol 1</div>
  <div>kol 2</div>
  <div>kol 3</div>  
</div>

Różnice pojawiają się dopiero w strukturze kodu CSS.

.flex-container {
  display: flex;
  background-color: darkblue;
}

.flex-container div {
  background-color: #ccc;
  margin: 10px;
  padding:20px;
  font-size: 30px;
}

Efekt:

Kluczowym elementem w tym przykładzie jest ustawienie: display: flex;
To dzięki niemu elementy zyskują nowe ciekawe właściwości.

---

Jeśli nie do końca rozumiecie działanie tej właściwości możecie ją przetestować z pomocą poniższego Generatora. Link do niego podesłał mi jeden z czytelników bloga – Foltas Folti

• Generator Flexbox

Order – kolejność

Z pomocą właściwości „order” możemy dowolnie zmieniać kolejność wyświetlania elementów HTML. Chodzi np. elementy <div> pełniące rolę kontenerów spinających fragmenty kodu. Właściwość dodajemy więc na konkretnym elemencie, który chcemy przemieścić.

Dzięki temu możemy przemieszczać, tasować między sobą elementy tak by pasowały np. kiedy chcemy by na jednym urządzeniu coś było w jednym miejscu a na drugim w innym. Nie jesteśmy więc ograniczeni położeniem elementu w kodzie strony.

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:

Kod HTML:

<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>

---

Kod CSS

.conteiner{
  max-width: 800px;
  margin: 0 auto;
  padding:15px;
}
/* container */
.flex-container {
  display: flex;
  background-color: darkblue;
  margin-bottom: 15px;
}
/* element */
.flex-container div {
  background-color: #ccc;
  margin: 10px;
  padding:20px;
  font-size: 30px;
}

align-self – wyrównanie

Właściwość ta określa wyrównanie dla wybranego elementu wewnątrz elastycznego kontenera. Właściwość align-self zastępuje właściwość align-items elementu kontenera elastycznego.

align-self przyznaje następujące cechy:

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Przykłady działania:

Ogólny kod CSS dla przykładu:

.flex-container {
  display: flex;
  background-color: #f1f1f1;
  height: 300px;
}

HTML przepytuje się za to następująco:

<div class="flex-container">
  <div>kol 1</div>
  <div class="auto">kol 2</div>
  <div>kol 3</div>
</div>

W przykładach specjalnie nie będziemy ingerować w kod HTML zmienimy jedynie wartość omawianej właściwości. Poniżej samodzielnie możesz sprawdzić jak działa ta właściwość.

See the Pen align-self test by Aura (@Julka85) on CodePen.

Mam nadzieję, że wpis okaże się dla was pomocny. Oceniając go wato pamiętać, że jest on częścią większej całości i sporo informacji pominęłam.

Jeżeli chcecie bym kontynuowała kurs z flexbox informację o tym możecie umieścić w formie komentarza.

flex-grow – zmiana szerokości elementu

Kiedy zaczynamy pracę z Flexbox często wydaje nam się, że zasady jego działania będą takie same jak w przypadku tradycyjnego CSS. Jednak to nie do końca jest prawda. Często przekonujemy się o tym w ciężki sposób kiedy odkrywamy np. że nie możemy ustawić szerokości kolumn w % a i stała w px nie zawsze da nam pożądany efekt. Jest tak dlatego, że elementy mają odgórnie taką samą szarość (wysokość w wielu przypadkach również).

I tu przydatny okaże się flex-grow. Za jego pomocą możemy wpływać na szerokość elementów. Wygląda to następująco:

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>

Jak widać jest to kolejna właściwość, która zamiast bardzo skomplikowanego nazewnictwa wartości stosuje zwykłe numery.

Z pomocą tej właściwości można np. ustawiać szerokości kolumn w obrębie strony internetowej.

flex-direction – Kierunek wyświetlania

Właściwość flex-direction odpowiada za określenie kierunku, w którym mają zostać skierowane, wyświetlone kolumny (elementy) na stronie internetowej. W pewnym sensie ma więc podobne działanie do float. Właściwość ta jest o tyle ciekawa, że jeśli chcemy zachować domyślny układ nie musimy jej dodawać. Posiada ona bowiem domyślne ustawienie do lewej strony.

Wartości przyjmowane przez flex-direction

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

Przykład jak mogą być układane elementy w sekcji strony internetowej:

Jak widać powyżej chociaż kolejność elementów w niektórych przykładach uległa zmianie nadal są one w tej samej kolejności. Tylko odwróconej. Tą nieścisłość spowodowaną działaniem flex-direction można naprawić z pomocą order.

źródło:
https://www.w3schools.com/css/css3_flexbox.asp#order
https://webroad.pl/html5-css3/2466-css3-flexbox-podstawowe-zalozenia
https://eduweb.pl/live/poznaj-css-flexbox
https://www.w3schools.com/cssref/css3_pr_align-self.asp

Dodatkowe tagi:

CSS Flexible Box Layout Module