Wyrównanie wzdłuż osi poprzecznej

8.1 Właściwość align-items

Właściwości align-items i align-self pozwalają na wyrównywanie elementów Flex wzdłuż osi poprzecznej, zapewniając elastyczność i precyzję w układzie.

Właściwość align-items zarządza wyrównywaniem elementów Flex wzdłuż osi poprzecznej (prostopadle do głównej osi) wewnątrz kontenera Flex. Oś poprzeczna zależy od wartości właściwości flex-direction:

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

Wartości:

• stretch: elementy rozciągają się, aby wypełnić kontener (wartość domyślna)
• flex-start: elementy są wyrównane do początku kontenera
• flex-end: elementy są wyrównane do końca kontenera
• center: elementy są wyrównane do środka kontenera
• baseline: elementy są wyrównane do linii bazowej tekstu

Przykład użycia:

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

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

      .align-stretch {
        align-items: stretch;
      }

      .align-flex-start {
        align-items: flex-start;
      }
    
  

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

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

8.2 Właściwość align-self

Właściwość align-self pozwala nadpisać wartość align-items dla konkretnego elementu Flex. Ta właściwość jest stosowana bezpośrednio do elementu Flex i zarządza jego wyrównaniem wzdłuż osi poprzecznej w kontenerze Flex.

Wartości:

• auto: wartość dziedziczona od rodzica (domyślnie)
• stretch: element rozciąga się, aby wypełnić kontener
• flex-start: element jest wyrównany do początku kontenera
• flex-end: element jest wyrównany do końca kontenera
• center: element jest wyrównany do środka kontenera
• baseline: element jest wyrównany do linii bazowej tekstu

Przykład użycia:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
      }

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

      .self-flex-end {
        align-self: flex-end;
      }

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">Element 3</div>
        <div class="item self-center">Element 4</div>
        <div class="item self-baseline">Element 5</div>
      </div>
    
  

Objaśnienie kodu:

• .self-flex-end: ten element jest wyrównany do dolnej krawędzi kontenera
• .self-center: ten element jest wyrównany do środka w pionie
• .self-baseline: ten element jest wyrównany do linii bazowej tekstu

8.3 Centrowanie elementów

Flexbox umożliwia łatwe centrowanie elementów zarówno pionowo, jak i poziomo, używając kombinacji justify-content i align-items lub align-self.

Przykład użycia:

    
      .center-container {
        display: flex;
        justify-content: center; /* poziome centrowanie */
        align-items: center; /* pionowe centrowanie */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">Centrowany element</div>
      </div>
    
  

Objaśnienie kodu:

• .center-container: Kontener Flex, w którym elementy są centrowane poziomo za pomocą justify-content: center; i pionowo za pomocą align-items: center;
• .center-item: Element Flex, który jest wyrównany do środka kontenera