Основы Flexbox

5.1 Основные концепции Flexbox

Flexbox (Flexible Box Layout) — это мощная система компоновки CSS, которая предоставляет гибкие и эффективные способы распределения пространства и выравнивания элементов внутри контейнера. Flexbox особенно полезен для создания сложных макетов и адаптивного дизайна. Сейчас мы рассмотрим основы Flexbox, включая создание Flex-контейнеров и элементов, а также использование свойства display: flex;.

Основные концепции Flexbox

Flexbox состоит из двух ключевых компонентов:

• Flex-контейнер: родительский элемент, который включает в себя Flex-элементы.
• Flex-элементы: дочерние элементы внутри Flex-контейнера, которые выравниваются и распределяются в соответствии с правилами Flexbox.

Flex-контейнер

Flex-контейнер создается с помощью свойства display: flex; или display: inline-flex; Flex-контейнер управляет расположением своих дочерних элементов (Flex-элементов) и предоставляет множество возможностей для их выравнивания и распределения.

    
      .container {
        display: flex; /* или inline-flex */
      }
    
  

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

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

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

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

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

• .container: Flex-контейнер, созданный с помощью display: flex;. Внутри этого контейнера элементы выравниваются и распределяются в соответствии с правилами Flexbox
• .item: Flex-элементы, которые являются дочерними элементами Flex-контейнера

5.2 Свойства Flex-контейнера

Свойство display: flex; определяет элемент как Flex-контейнер. Дочерние элементы этого контейнера автоматически становятся Flex-элементами и начинают следовать правилам Flexbox.

display: flex;

Создает блоковый Flex-контейнер. Flex-контейнер ведет себя как блочный элемент, занимая всю доступную ширину родительского элемента.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Создает строчный Flex-контейнер. Flex-контейнер ведет себя как строчный элемент, занимая только необходимую ширину, и может располагаться рядом с другими строчными элементами.

    
      .inline-container {
        display: inline-flex;
      }
    
  

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

    
      .inline-container {
        display: inline-flex;
        border: 2px solid #000;
        padding: 10px;
      }

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

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

      <div class="inline-container">
        <div class="item">Элемент 4</div>
        <div class="item">Элемент 5</div>
      </div>
    
  

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

• inline-container — это Flex-контейнер, созданный с помощью display: inline-flex; Внутри этого контейнера элементы выравниваются и распределяются в соответствии с правилами Flexbox. Контейнеры ведут себя как строчные элементы и располагаются рядом друг с другом.

5.3 Свойства Flex-элементов

1. Свойство flex — это сокращенная запись для задания flex-grow, flex-shrink и flex-basis. Оно позволяет управлять тем, как Flex-элементы растягиваются и сжимаются, чтобы заполнить доступное пространство.

Синтаксис:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

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

    
      .item {
        flex: 1;
      }
    
  

2. Свойство order

Свойство order определяет порядок, в котором Flex-элементы располагаются внутри Flex-контейнера. По умолчанию все элементы имеют значение order: 0;.

Значения

Целые числа. Элементы с меньшим значением будут располагаться перед элементами с большим значением.

Синтаксис:

    
      .element {
        order: value;
      }
    
  

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

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

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

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

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

• .item-1: имеет значение order: 2, поэтому будет располагаться после элемента с order: 1
• .item-2: имеет значение order: 1, поэтому будет располагаться первым
• .item-3: имеет значение order: 3, поэтому будет располагаться последним

1

Задача

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

Недоступна

Flex-контейнер

Flex-контейнер

Открыть

1

Задача

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

Недоступна

Inline-Flex контейнер

Inline-Flex контейнер

Открыть

1

Опрос

Блочная модель, 9 уровень, 4 лекция

Недоступен

Блочная модель

Блочная модель

Открыть