Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Frontend SELF PL /Wyrównanie wzdłuż osi głównej

Wyrównanie wzdłuż osi głównej

Frontend SELF PL
Poziom 17 , Lekcja 3
Dostępny

7.1 Właściwość justify-content

Flexbox dostarcza niesamowite narzędzia do zarządzania wyrównaniem oraz rozmieszczeniem przestrzeni między elementami wewnątrz Flex-kontenera. Jedną z kluczowych właściwości dla tego jest justify-content, która kontroluje wyrównanie Flex-elementów wzdłuż osi głównej.

Właściwość justify-content określa, jak Flex-elementy będą rozmieszczone wzdłuż osi głównej Flex-kontenera. Oś główna zależy od wartości właściwości flex-direction:

  • Jeśli flex-direction ma wartość row lub row-reverse, oś główna będzie pozioma
  • Jeśli flex-direction ma wartość column lub column-reverse, oś główna będzie pionowa

Wartości:

  • flex-start: elementy są wyrównane do początku kontenera (wartość domyślna)
  • flex-end: elementy są wyrównane do końca kontenera
  • center: elementy są wyrównane do środka kontenera
  • space-between: elementy są równomiernie rozmieszczone z równymi odstępami między nimi
  • space-around: elementy są równomiernie rozmieszczone z odstępami na krawędziach i między nimi
  • space-evenly: elementy są równomiernie rozmieszczone z jednakowymi odstępami między nimi i na krawędziach kontenera

Przykład użycia:

CSS 
    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

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

      .flex-start {
        justify-content: flex-start;
      }
C++
HTML 
    
      <div class="container flex-start">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

7.2 Wartości justify-content

1. flex-start

Przy wartości flex-start elementy są wyrównane do początku Flex-kontenera, czyli z lewej strony, jeśli kierunek osi głównej jest poziomy (row), lub z góry, jeśli kierunek osi głównej jest pionowy (column).

Przykład użycia:

CSS 
    
      .container {
        display: flex;
        justify-content: flex-start;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

2. flex-end

Przy wartości flex-end elementy są wyrównane do końca Flex-kontenera, czyli z prawej strony, jeśli kierunek osi głównej jest poziomy (row), lub z dołu, jeśli kierunek osi głównej jest pionowy (column).

Przykład użycia:

CSS 
    
      .container {
        display: flex;
        justify-content: flex-end;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

3. center

Przy wartości center elementy są wyrównane do środka Flex-kontenera. Ta wartość jest przydatna do tworzenia wyśrodkowanych układów.

Przykład użycia:

CSS 
    
      .container {
        display: flex;
        justify-content: center;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

4. space-between

Przy wartości space-between elementy są równomiernie rozmieszczone wzdłuż osi głównej z równymi odstępami między nimi. Pierwszy element jest wyrównany do początku kontenera, a ostatni element — do końca kontenera.

Przykład użycia:

CSS 
    
      .container {
        display: flex;
        justify-content: space-between;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

5. space-around

Przy wartości space-around elementy są równomiernie rozmieszczone z odstępami na krawędziach i między nimi. Odstępy między elementami będą dwa razy większe niż odstępy na krawędziach kontenera.

Przykład użycia:

CSS 
    
      .container {
        display: flex;
        justify-content: space-around;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

6. space-evenly

Przy wartości space-evenly elementy są równomiernie rozmieszczone z jednakowymi odstępami między nimi i na krawędziach kontenera. Ta wartość zapewnia równe odstępy w całym kontenerze.

Przykład użycia:

CSS 
    
      .container {
        display: flex;
        justify-content: space-evenly;
      }
HTML 
    
      <div class="container">
        <div class="item">Element 1</div>
        <div class="item">Element 2</div>
        <div class="item">Element 3</div>
      </div>

7.3 Wyśrodkowanie menu

Przykład użycia w rzeczywistych projektach — wyśrodkowanie menu nawigacyjnego:

CSS 
    
      .nav {
        display: flex;
        justify-content: center;
        background-color: #333;
        padding: 10px;
      }

      .nav-item {
        color: white;
        padding: 10px 20px;
        text-decoration: none;
      }

      .nav-item:hover {
        background-color: #575757;
      }
HTML 
    
      <nav class="nav">
        <a href="#" class="nav-item">Główna</a>
        <a href="#" class="nav-item">O nas</a>
        <a href="#" class="nav-item">Usługi</a>
        <a href="#" class="nav-item">Kontakt</a>
      </nav>

Wyjaśnienie kodu:

  • .nav: Flex-kontener dla menu nawigacyjnego z wyrównaniem elementów do środka
  • .nav-item: Flex-elementy (linki) z podstawowymi stylami
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION