Выравнивание по главной оси

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>
    
  

5. space-around

При значении space-around элементы равномерно распределяются с интервалами по краям и между ними. Интервалы между элементами будут в два раза больше интервалов по краям контейнера.

Пример использования:

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

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

6. space-evenly

При значении space-evenly элементы равномерно распределяются с одинаковыми интервалами между ними и по краям контейнера. Это значение обеспечивает равные интервалы по всему контейнеру.

Пример использования:

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

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

7.3 Центрирование меню

Пример использования в реальных проектах — центрирование навигационного меню:

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

    
      <nav class="nav">
        <a href="#" class="nav-item">Главная</a>
        <a href="#" class="nav-item">О нас</a>
        <a href="#" class="nav-item">Услуги</a>
        <a href="#" class="nav-item">Контакты</a>
      </nav>
    
  

Объяснение кода:

• .nav: Flex-контейнер для навигационного меню с выравниванием элементов по центру
• .nav-item: Flex-элементы (ссылки) с основными стилями

1

Задача

Модуль 1: Web Core, 9 уровень, 6 лекция

Недоступна

Использование flex-start

Использование flex-start

Открыть

1

Задача

Модуль 1: Web Core, 9 уровень, 6 лекция

Недоступна

Использование flex-end и center

Использование flex-end и center

Открыть