Распределение пространства

9.1 Свойство flex-grow

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

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

Значения:

• Целое число или дробное значение
• Значение по умолчанию: 0 (элемент не растет)

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

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

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

      .grow-1 {
        flex-grow: 1;
      }

      .grow-2 {
        flex-grow: 2;
      }
    
  

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

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

• .grow-1: эти элементы имеют значение flex-grow: 1;, что позволяет им расти равномерно
• .grow-2: этот элемент имеет значение flex-grow: 2;, что позволяет ему расти в два раза больше по сравнению с элементами с flex-grow: 1;

9.2 Свойство flex-shrink

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

Значения:

• Целое число или дробное значение
• Значение по умолчанию: 1 (элемент может уменьшаться)

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

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

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

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }
    
  

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

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

• .shrink-0: этот элемент имеет значение flex-shrink: 0;, что не позволяет ему уменьшаться
• .shrink-1: эти элементы имеют значение flex-shrink: 1;, что позволяет им уменьшаться по мере необходимости

9.3 Свойство flex-basis

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

Значения:

• Длина в различных единицах (px, %, em и т. д.)
• Значение по умолчанию: auto (размер определяется содержимым)

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

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

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

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }
    
  

    
      <div class="container">
        <div class="item basis-auto">Элемент 1</div>
        <div class="item basis-100px">Элемент 2</div>
        <div class="item basis-50percent">Элемент 3</div>
      </div>
    
  

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

• .basis-auto: этот элемент имеет значение flex-basis: auto;, что означает, что его размер определяется содержимым
• .basis-100px: этот элемент имеет фиксированный начальный размер 100 пикселей
• .basis-50percent: этот элемент имеет начальный размер 50% от ширины контейнера

9.4 Использование свойств

Свойство flex является сокращенной записью для задания flex-grow, flex-shrink и flex-basis. Оно позволяет управлять всеми тремя аспектами распределения пространства в одном свойстве.

Синтаксис:

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

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

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

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

      .flex-1 {
        flex: 1 1 auto;
      }

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }
    
  

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

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

• .flex-1: этот элемент имеет flex: 1 1 auto;, что означает, что он может расти и сжиматься равномерно с другими элементами, и его начальный размер определяется содержимым
• .flex-2: этот элемент имеет flex: 2 1 100px;, что означает, что он может расти в два раза больше по сравнению с элементами с flex-grow: 1;, может сжиматься и имеет начальный размер 100 пикселей
• .flex-3: этот элемент имеет flex: 1 0 50%;, что означает, что он может расти, но не сжиматься, и его начальный размер составляет 50% от ширины контейнера

1

Задача

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

Недоступна

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

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

Открыть

1

Задача

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

Недоступна

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

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

Открыть