Розподіл простору

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% від ширини контейнера