Ćwiczenia z informatyki

Flexbox wykorzystuje narzędzia, które pozwalają na szybkie tworzenie kompleksowego i elastycznego układu strony.
Pozwala na rozmieszczanie elementów w wierszach lub kolumnach, przedmioty rozciągają się aby wypełnić dodatkową przestrzeń lub kurczą się aby dopasować się do mniejszych przestrzeni.

Dlaczego Flexbox?

Przez długi czas jedynymi narzędziami działającymi w przeglądarkach, do tworzenia układu strony w CSS były właściwości: float i position. Działają, ale też posiadają swoje ograniczenia.

Poniższe wymagania dotyczące układu są trudne lub niemożliwe do osiągnięcia dzięki wcześniej wspomnianym narzędziom:

Pionowe wycentrowanie blokowego elementu z zawartością, względem rodzica.
Sprawienie by wszystkie "dzieci" w pojemniku zajęły taką samą ilość dostępnej szerokośći/wysokości, bez względu na to jaka szerokość/wysokość jest dostępna.
Umieszczenie kolumn o takiej samej wysokości w wielokolumnowym układzie nawet jeśli zawierają inną liczbę znaków

Jak zauważysz w kolejnych sekcjach, flexbox ułatwia tworzenie układów strony.

Wprowadzenie i prosty przykład

Zaczynamy!

Wraz z rozwojem specyfikacji CSS3 zostały do niej dodane właściwości CSS, które są przeznaczone dla elastycznych elementów HTML, czyli takich, których sposób wyświetlenia określa właściwość display wraz z wartością flex lub inline-flex.

Gdy umieścimy kilka elementów HTML w innym elemencie HTML, tworzą one układ "rodzic" -> "dzieci".
Gdy dzieci danego elementu HTML są elementami blokowymi (domyślnie display:block;) to wspomniane elementy HTML wyświetlają się jeden pod drugim oraz ich szerokość dopasowuje się automatycznie do szerokości ich elementu rodzica (uwzględniając przy tym jego marginesy wewnętrzne, czyli właściwość padding).

Przykład:

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Darmowy Kurs CSS</title>
    
        <style>
          .rodzic {
            background-color:#B2FFFF;
            padding:5px;
          }
    
          .rodzic > div {
            background-color:#5DD;
            margin:10px;
            padding:5px;
          }
        </style>
      </head>
    
      <body>
    
        <div class="rodzic">
          <div id="div1">div - 1</div>
          <div id="div2">div - 2</div>
          <div id="div3">div - 3</div>
        </div>
    
      </body>
    </html>

Efekt: Flexbox 1

Dodajmy jednak do klasy rodzic właściwość display:flex;
Zmiana:

.rodzic {
            display: flex;
            background-color:#B2FFFF;
            padding:5px;
          }

Efekt: Flexbox 2

Położenie obiektów w układzie `flex`

Za rozmieszczenie obiektów odpowiedzialnych jest pięć postawowych właściwości:

flex-direction - wartości:
- row - domyślnie
- column
- row-rewerse
- column-reverse
flex-wrap - właściwość określa, czy elementy elastyczne mają się zawijać, czy nie., jeśli nie ma na nie wystarczająco dużo miejsca na jednej linii elastycznej.

Może mieć jedną z następujących wartości:
- nowrap - określa, że elementy elastyczne nie zostaną zawinięte (jest to ustawienie domyślne):
```
.rodzic {
            display: flex;
            flex-wrap: nowrap;
        }
```
- wrap - określa, że elementy elastyczne zostaną zawinięte, jeśli zajdzie taka potrzeba:
```
.rodzic {
            display: flex;
            flex-wrap: wrap;
        }
```
- wrap-reverse - określa, że elementy elastyczne zostaną zawinięte, jeśli zajdzie taka potrzeba, w odwrotnej kolejności:
```
.rodzic {
            display: flex;
            flex-wrap: wrap-rewerse;
        }
```
Połączeniem powyższych właściwości (skróca to zapis) jest flex-flow. Podajemy tu dwie wartości: flex-direction flex-wrap
```
.rodzic {
            display: flex;
            flex-flow: row wrap;
        }
```
justify-content - właściwość służy do wyrównywania elementów elastycznych, gdy nie wykorzystują całej dostępnej przestrzeni na osi głównej (w poziomie).

Właściwość justify-content może mieć jedną z następujących wartości
- center - umieszcza elementy elastyczne w środku kontenera
- flex-start - umieszcza elementy elastyczne na początku kontenera (jest to ustawienie domyślne)
- flex-end - pozycjonuje elementy elastyczne na końcu kontenera:
- space-around - wyświetla elementy elastyczne z przestrzenią wokół nich
- space-between - wyświetla elementy elastyczne z odstępem między nimi
- space-evenly - wyświetla elementy elastyczne z równą ilością miejsca wokół nich
align-items - właściwość służy do wyrównywania elementów elastycznych, gdy nie wykorzystują całej dostępnej przestrzeni na osi poprzecznej (w pionie).

Właściwość align-items może mieć jedną z następujących wartości:
- center - umieszcza elementy elastyczne na środku kontenera:
- flex-start - pozycjonuje elementy elastyczne na górze kontenera:
- flex-end - pozycjonuje elementy elastyczne na dole kontenera:
- stretch - rozciąga elementy elastyczne, aby wypełnić kontener (jest wartością domyślną):
- baseline - pozycjonuje elementy elastyczne na linii bazowej kontenera:
align-content W poniższych przykładach kontener ma wysokość 600 pikseli i flex-wrap:wrap
- center - elementy ustawiane są w środku pojemnika:
- stretch - elementy rozciągają się, aby zająć pozostałą przestrzeń kontenera (jest to ustawienie domyślne):
- flex-start - elementy umieszczane są na początku kontenera:
- flex-end - elementy umieszczane są na końcu kontenera:
- space-around - odstępy między elementami są równe, ale odstęp przed pierwszym elementem i po ostatnim elemencie jest ustawiony na połowę odstępu między elementami:
- space-between - odstępy między elementami są równe, ale pierwszy element jest wyrównany z krawędzią początkową kontenera, a ostatni element jest wyrównany z krawędzią końcową kontenera:
- space-evenly - elementy są równomiernie rozłożone w pojemniku elastycznym, a na górze, dole i pomiędzy nimi jest tyle samo miejsca:

Przy określaniu właściwości flex bardzo pomocna jest konsola przeglądarki.
Uruchamiamy konsolę F12 - otwiera się panel boczny: Flexbox 27

Przy elementach, które mają ustawioną właściwość display:flex pojawia się znaczek, który rozwija tabelę umożliwiającą formatowanie właściwości: Flexbox 28

Po wybraniu odpowiednich właściwości należy je skopiować do naszego kodu CSS: Flexbox 29

Elementy CSS flex

Właściwości CSS, których używamy dla elementów flex to:

order - określa kolejność elementów flex wewnątrz kontenera flex

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

flex-grow - określa, o ile element flex będzie rósł w stosunku do elementów pozostałych.

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

flex-shrink - określa, jak bardzo element elastyczny zostanie zmniejszony w stosunku do pozostałych elementów elastycznych.
Nie dopuść, aby trzeci element elastyczny skurczył się tak bardzo, jak pozostałe elementy elastyczne:

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div style="flex-shrink: 0">3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>

flex-basis - określa początkową długość elementu flex.
Ustaw początkową długość trzeciego elementu elastycznego na 200 pikseli:
```
<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div style="flex-basis: 200px">3</div>
    <div>4</div>
  </div>
```
flex - jest skróconą właściwością dla właściwości flex-grow, flex-shrink, i flex-basis.
Ustawia trzeci element flex tak, aby nie mógł się powiększać (0), nie mógł się kurczyć (0) i miał początkową długość 200 pikseli:
```
<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div style="flex: 0 0 200px">3</div>
    <div>4</div>
  </div>
```
align-self - określa wyrównanie wybranego elementu wewnątrz elastycznego kontenera.
Ta właściwość zastępuje domyślne wyrównanie ustawione przez właściwość kontenera align-items.

Wyruwnuje trzeci element do środka:
```
<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div style="align-self: center">3</div>
    <div>4</div>
  </div>
```
Wyrównaj drugi element elastyczny na górze kontenera, a trzeci element elastyczny na dole kontenera:
```
<div class="flex-container">
    <div>1</div>
    <div style="align-self: flex-start">2</div>
    <div style="align-self: flex-end">3</div>
    <div>4</div>
  </div>
```

Dlaczego Flexbox?

Wprowadzenie i prosty przykład

Położenie obiektów w układzie flex

Elementy CSS flex

Położenie obiektów w układzie `flex`