Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Frontend SELF PL /Kierunek osi

Kierunek osi

Frontend SELF PL
Poziom 17 , Lekcja 2
Dostępny

6.1 Właściwość flex-direction

Flexbox oferuje elastyczne i potężne narzędzia do tworzenia responsywnych układów. Ważną częścią tego systemu są osie rozmieszczenia, które określają, jak Flex-elementy będą rozmieszczane wewnątrz Flex-kontenera. Poniżej szczegółowo omówimy właściwości flex-direction i flex-wrap, które kontrolują kierunek osi i zachowanie Flex-elementów przy przepełnieniu.

Właściwość flex-direction określa kierunek głównej osi, wzdłuż której będą rozmieszczane Flex-elementy. Ten kierunek może być poziomy lub pionowy, a także bezpośredni lub odwrotny.

Wartości:

  • row: główna oś biegnie poziomo z lewej do prawej (wartość domyślna)
  • row-reverse: główna oś biegnie poziomo z prawej do lewej
  • column: główna oś biegnie pionowo z góry na dół
  • column-reverse: główna oś biegnie pionowo z dołu do góry

Przykład użycia

1. Elementy są rozmieszczone poziomo:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>
C++

2. Elementy są rozmieszczone pionowo:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

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

Wyjaśnienie kodu:

  • .container-row: elementy rozmieszczone są poziomo z lewej do prawej
  • .container-row-reverse: elementy rozmieszczone są poziomo z prawej do lewej
  • .container-column: elementy rozmieszczone są pionowo z góry na dół
  • .container-column-reverse: elementy rozmieszczone są pionowo z dołu do góry

6.2 Właściwość flex-wrap

Właściwość flex-wrap określa, czy Flex-elementy będą przenoszone do nowego wiersza/kolumny, jeśli nie mieszczą się w jednym rzędzie. Jest to szczególnie przydatne dla tworzenia responsywnych układów, gdzie rozmiar kontenera może się zmieniać w zależności od urządzenia lub ekranu.

Wartości

  • nowrap: elementy nie są przenoszone i rozmieszczane w jednym wierszu/kolumnie (wartość domyślna)
  • wrap: elementy przenoszone są do nowego wiersza/kolumny, gdy to konieczne
  • wrap-reverse: elementy przenoszone są do nowego wiersza/kolumny w odwrotnej kolejności

Przykłady użycia

Wartość nowrap:

Elementy nie są przenoszone i rozmieszczane w jednym wierszu/kolumnie (wartość domyślna).

CSS 
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

Wartość wrap:

Elementy przenoszone są do nowego wiersza/kolumny, gdy to konieczne.

CSS 
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

Wartość wrap-reverse:

Elementy przenoszone są do nowego wiersza/kolumny w odwrotnej kolejności.

CSS 
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
      </div>

Wyjaśnienie kodu:

  • .container-nowrap: Flex-elementy rozmieszczane są w jednym wierszu, nawet jeśli wychodzą poza granice kontenera
  • .container-wrap: Flex-elementy przenoszone są do nowego wiersza, jeśli nie mieszczą się w jednym wierszu
  • .container-wrap-reverse: Flex-elementy przenoszone są do nowego wiersza w odwrotnej kolejności

6.3 Użycie flex-direction i flex-wrap

Właściwości flex-direction i flex-wrap można łączyć za pomocą skróconej właściwości flex-flow. To właściwość pozwala ustawiać kierunek osi i przenoszenie elementów jednocześnie.

Składnia:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

Przykład użycia:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
        <div class="item">Element 4</div>
        <div class="item">Element 5</div>
      </div>

Wyjaśnienie kodu:

  • .container: Flex-kontener z połączonym użyciem flex-direction: row; i flex-wrap: wrap;, co oznacza, że elementy rozmieszczane są poziomo i przenoszone do nowego wiersza, gdy jest to konieczne
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION