Podstawy Flexbox

5.1 Podstawowe pojęcia w Flexbox

Flexbox (Flexible Box Layout) — to potężny system rozmieszczenia CSS, który oferuje elastyczne i efektywne sposoby rozdzielania przestrzeni i wyrównywania elementów w kontenerze. Flexbox jest szczególnie przydatny do tworzenia skomplikowanych układów i responsywnego designu. Teraz omówimy podstawy Flexboxa, w tym tworzenie flex-kontenerów i elementów, a także użycie właściwości display: flex;.

Podstawowe pojęcia Flexbox

Flexbox składa się z dwóch kluczowych komponentów:

• Flex-kontener: nadrzędny element, który zawiera w sobie Flex-elementy.
• Flex-elementy: podrzędne elementy w Flex-kontenerze, które są wyrównywane i rozdzielane zgodnie z zasadami Flexbox.

Flex-kontener

Flex-kontener tworzony jest za pomocą właściwości display: flex; lub display: inline-flex;. Flex-kontener zarządza rozmieszczeniem swoich podrzędnych elementów (Flex-elementów) i oferuje wiele możliwości ich wyrównania i rozdzielenia.

    
      .container {
        display: flex; /* lub inline-flex */
      }
    
  

Przykład użycia:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>
    
  

Wyjaśnienie kodu:

• .container: Flex-kontener stworzony za pomocą display: flex;. W jego wnętrzu elementy są wyrównywane i rozdzielane zgodnie z zasadami Flexbox
• .item: Flex-elementy, które są podrzędnymi elementami Flex-kontenera

5.2 Właściwości Flex-kontenera

Właściwość display: flex; definiuje element jako Flex-kontener. Podrzędne elementy tego kontenera automatycznie stają się Flex-elementami i zaczynają działać zgodnie z zasadami Flexbox.

display: flex;

Tworzy blokowy Flex-kontener. Flex-kontener zachowuje się jak blokowy element, zajmując całą dostępną szerokość elementu nadrzędnego.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Tworzy liniowy Flex-kontener. Flex-kontener zachowuje się jak liniowy element, zajmując tylko potrzebną szerokość, i może być usytuowany obok innych liniowych elementów.

    
      .inline-container {
        display: inline-flex;
      }
    
  

Przykład użycia:

    
      .inline-container {
        display: inline-flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

    
      <div class="inline-container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

      <div class="inline-container">
        <div class="item">Element 4</div>
        <div class="item">Element 5</div>
      </div>
    
  

Wyjaśnienie kodu:

• inline-container — to Flex-kontener utworzony za pomocą display: inline-flex;. W jego wnętrzu elementy są wyrównywane i rozdzielane zgodnie z zasadami Flexbox. Kontenery zachowują się jak elementy liniowe i są usytuowane obok siebie.

5.3 Właściwości Flex-elementów

1. Właściwość flex — to skrócony zapis dla flex-grow, flex-shrink i flex-basis. Pozwala zarządzać tym, jak Flex-elementy rozszerzają się i kurczą, aby wypełnić dostępną przestrzeń.

Składnia:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Przykład użycia:

    
      .item {
        flex: 1;
      }
    
  

2. Właściwość order

Właściwość order określa kolejność, w jakiej Flex-elementy są rozmieszczane w Flex-kontenerze. Domyślnie wszystkie elementy mają wartość order: 0;.

Wartości

Liczby całkowite. Elementy z mniejszą wartością będą umieszczone przed elementami z większą wartością.

Składnia:

    
      .element {
        order: value;
      }
    
  

Przykład użycia:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item-1 {
        order: 2;
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

    
      <div class="container">
        <div class="item-1">Element 1</div>
        <div class="item-2">Element 2</div>
        <div class="item-3">Element 3</div>
      </div>
    
  

Wyjaśnienie kodu:

• .item-1: ma wartość order: 2, więc będzie umieszczony za elementem o order: 1
• .item-2: ma wartość order: 1, więc będzie umieszczony pierwszy
• .item-3: ma wartość order: 3, więc będzie umieszczony ostatni

1

Zadanie

Frontend SELF PL, poziom 17, lekcja 1

Niedostępne

Kontener Flex

Kontener Flex

Otwórz

1

Zadanie

Frontend SELF PL, poziom 17, lekcja 1

Niedostępne

Kontener Inline-Flex

Kontener Inline-Flex

Otwórz