Вирівнювання по головній осі

7.1 Властивість justify-content

Flexbox надає круті інструменти для управління вирівнюванням та розподілом простору між елементами всередині Flex-контейнера. Однією з ключових властивостей для цього є justify-content, яка керує вирівнюванням Flex-елементів уздовж головної осі.

Властивість justify-content визначає, як Flex-елементи будуть розподілятися вздовж головної осі Flex-контейнера. Головна вісь залежить від значення властивості flex-direction:

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

Значення:

• flex-start: елементи вирівнюються по початку контейнера (значення за замовчуванням)
• flex-end: елементи вирівнюються по кінцю контейнера
• center: елементи вирівнюються по центру контейнера
• space-between: елементи рівномірно розподіляються з рівними інтервалами між ними
• space-around: елементи рівномірно розподіляються з інтервалами по краях і між ними
• space-evenly: елементи рівномірно розподіляються з однаковими інтервалами між ними та по краях контейнера

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

    
      .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;
      }
    
  

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

7.2 Значення justify-content

1. flex-start

При значенні flex-start елементи вирівнюються по початку Flex-контейнера, тобто з лівого боку, якщо напрямок головної осі горизонтальний (row), або з верхнього боку, якщо напрямок головної осі вертикальний (column).

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

    
      .container {
        display: flex;
        justify-content: flex-start;
      }
    
  

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

2. flex-end

При значенні flex-end елементи вирівнюються по кінцю Flex-контейнера, тобто з правого боку, якщо напрямок головної осі горизонтальний (row), або з нижнього боку, якщо напрямок головної осі вертикальний (column).

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

    
      .container {
        display: flex;
        justify-content: flex-end;
      }
    
  

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

3. center

При значенні center елементи вирівнюються по центру Flex-контейнера. Це значення корисне для створення центрованих макетів.

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

    
      .container {
        display: flex;
        justify-content: center;
      }
    
  

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

4. space-between

При значенні space-between елементи рівномірно розподіляються уздовж головної осі з рівними інтервалами між ними. Перший елемент вирівнюється по початку контейнера, а останній елемент — по кінцю контейнера.

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

    
      .container {
        display: flex;
        justify-content: space-between;
      }
    
  

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