description.ru.yml

---

name: Гибкий размер элементов
theory: |
  Флекс подарил разработчикам одну из самых мощных фишек — гибкость. Если вы знакомы с английским, то могли заметить, что сам модуль называется Flex, что можно перевести как «сгибание» или «гибкость».

  Гибкость во флекс проявляется в возможности элементов изменять свои размеры по определённым правилам. Например, можно автоматически сжать элемент, если пространства недостаточно или наоборот — распределить пустое пространство в контейнере между всеми элементами.

  За гибкость элементов отвечают два свойства:

  1. `flex-grow` — возможность элемента получить часть пустого пространства
  2. `flex-shrink` — возможность элемента уменьшить свои размеры, чтобы поместиться в контейнер

  Оба свойства принимают положительное числовое значение, которое означает:

  * Для `flex-grow` — какую часть свободного пространства может забрать элемент
  * Для `flex-shrink` — на сколько может уменьшиться элемент

  Все эти значения работают как часть математической формулы, по которой браузер считает итоговое значение размера элемента. Это сложная и неочевидная тема для изучения в самом начале обучения поэтому, в этом уроке, мы опустим все формулы.

  На самом деле, дело не только в формулах и начале обучения. Верстальщики и сами не очень любят ставить различные значения, считая в уме, на сколько же будет уменьшаться или увеличиваться элемент.

  Чтобы избавиться от математических мук, разработчики пришли к самому популярному способу использования этих свойств, а именно выставление значение `1` или `0` для всех элементов в контейнере.

  Если поставить значение `flex-grow: 1`, то это означает прибавить ко всем элементам одинаковое количество к ширине.

  Например, если контейнер занимает 600 пикселей и в нём четыре элемента по 100 пикселей, то остаётся 200 пикселей пустого пространства. Это пространство поделится на четыре части и каждая из частей будет отдана одному из элементов. Значит ширина каждого элемента будет равняться 150 пикселей.

  Думайте об оставшемся месте в контейнере как о тортике, который нужно разделить на равное количество частей. Такой подход будет работать, если стоит значение `flex-grow: 1`.

  ```html
  <style>
    .container {
      width: 1000px;
      display: flex;
    }

    .item {
      width: 200px;
      flex-grow: 1;
    }
  </style>

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

  Вот как выглядят элементы без `flex-grow`:

  <div class="hexlet-basics-example my-3">
    <div class="bg-opacity-25 bg-secondary d-flex fw-bold py-3" style="width: 600px;">
      <div class="text-bg-danger text-center" style="width: 100px;height: 50px;">Элемент 1</div>
      <div class="text-bg-dark text-center" style="width: 100px;height: 50px;">Элемент 2</div>
      <div class="text-bg-primary text-center" style="width: 100px;height: 50px;">Элемент 3</div>
      <div class="text-bg-success text-center" style="width: 100px;height: 50px;">Элемент 4</div>
    </div>
  </div>

  А так со значением `flex-grow: 1` у элементов:

  <div class="hexlet-basics-example my-3">
    <div class="bg-opacity-25 bg-secondary d-flex fw-bold py-3" style="width: 600px;">
      <div class="flex-grow-1 text-bg-danger text-center" style="width: 100px;height: 50px;">Элемент 1</div>
      <div class="flex-grow-1 text-bg-dark text-center" style="width: 100px;height: 50px;">Элемент 2</div>
      <div class="flex-grow-1 text-bg-primary text-center" style="width: 100px;height: 50px;">Элемент 3</div>
      <div class="flex-grow-1 text-bg-success text-center" style="width: 100px;height: 50px;">Элемент 4</div>
    </div>
  </div>

  Можно поставить `flex-grow: 1` только для одного элемента. Тогда ему будет отдано всё свободное пространство. Это частый трюк при создании макетов, где одна из колонок должна занимать всё свободное пространство.

  Свойство `flex-shrink` со значением `1` будет работать по похожему сценарию. Из элементов будет вычтено одинаковое количество ширина в зависимости от того, сколько пространства не хватило, чтобы вместить все элементы. По умолчанию все флекс элементы имеют значение `flex-shrink: 1`, поэтому элементы будут ужиматься даже без дополнительного указания этого свойства.

instructions: |
  Заказчик полностью доволен блоком с вопросами и ответами и оставил последнюю правку — дать возможность *блоку со стрелкой* растягиваться на всё пустое пространство и выравнять стрелку по центру блока.

  Таким образом стрелка всегда будет аккуратно связывать вопрос и ответ на больших разрешениях экрана и пользователь быстро поймёт, где найти ответ на вопрос.

  Ваша задача — дописать свойства для Flex, которые нужны по заданию. Чтобы выравнять стрелку по горизонтали можно использовать свойство `text-align`. Не забудьте выровнять все элементы по вертикали, как в прошлом задании.

  ```html
  <style>
  .qa {
    font: 18px/1.5 sans-serif;
  }

  .question {
    width: 400px;
    padding: 20px;

    color: #fff;
    background: #8ea7e9;
  }

  .answer {
    width: 400px;
    padding: 20px;
  }

  .arrow {
    margin: 0 10px;
  }
  </style>

  <div class="qa">
    <div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
    <div class="arrow">→</div>
    <div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
  </div>
  ```