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

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-элемент, который выравнивается по центру контейнера

1

Задача

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

Недоступна

Использование align-items

Использование align-items

Открыть

1

Задача

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

Недоступна

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

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

Открыть