Вирівнювання по поперечній осі

8.1 Властивість align-items

Властивості align-items і align-self дозволяють вирівнювати Flex-елементи по поперечній осі, забезпечуючи гнучкість і точність у макеті.

Властивість align-items керує вирівнюванням Flex-елементів по поперечній осі (перпендикулярно головній осі) всередині Flex-контейнера. Поперечна вісь залежить від значення властивості flex-direction:

• Якщо flex-direction має значення row або row-reverse, поперечна вісь буде вертикальною
• Якщо flex-direction має значення column або column-reverse, поперечна вісь буде горизонтальною

Значення:

• stretch: елементи розтягуються, щоб заповнити контейнер (значення за замовчуванням)
• flex-start: елементи вирівнюються за початком контейнера
• flex-end: елементи вирівнюються за кінцем контейнера
• center: елементи вирівнюються по центру контейнера
• baseline: елементи вирівнюються за базовою лінією тексту

Приклад використання:

    
      .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">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
      </div>

      <div class="container align-flex-start">
        <div class="item">Елемент 1</div>
        <div class="item">Елемент 2</div>
        <div class="item">Елемент 3</div>
      </div>
    
  

8.2 Властивість align-self

Властивість align-self дозволяє перевизначити значення align-items для конкретного Flex-елемента. Ця властивість застосовується безпосередньо до Flex-елемента і керує його вирівнюванням по поперечній осі всередині Flex-контейнера.

Значення:

• auto: значення успадковується від батька (за замовчуванням)
• stretch: елемент розтягується, щоб заповнити контейнер
• flex-start: елемент вирівнюється за початком контейнера
• flex-end: елемент вирівнюється за кінцем контейнера
• center: елемент вирівнюється по центру контейнера
• baseline: елемент вирівнюється за базовою лінією тексту

Приклад використання:

    
      .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">Елемент 3</div>
        <div class="item self-center">Елемент 4</div>
        <div class="item self-baseline">Елемент 5</div>
      </div>
    
  

Пояснення коду:

• .self-flex-end: цей елемент вирівнюється за нижнім краєм контейнера
• .self-center: цей елемент вирівнюється по центру вертикально
• .self-baseline: цей елемент вирівнюється за базовою лінією тексту

8.3 Центрування елементів

Flexbox дозволяє легко центрувати елементи по вертикалі та горизонталі, використовуючи комбінацію justify-content і align-items або align-self.

Приклад використання:

    
      .center-container {
        display: flex;
        justify-content: center; /* горизонтальне центрування */
        align-items: center; /* вертикальне центрування */
        height: 300px;
        border: 2px solid #000;
      }

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

    
      <div class="center-container">
        <div class="center-item">Центрований елемент</div>
      </div>
    
  

Пояснення коду:

• .center-container: Flex-контейнер, у якому елементи центровані по горизонталі за допомогою justify-content: center; і по вертикалі за допомогою align-items: center;
• .center-item: Flex-елемент, який вирівнюється по центру контейнера