Курс CSS: Гибкий размер элементов

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

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

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

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

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

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

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

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

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

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

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

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

<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:

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

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

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

Задание

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

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

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

<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>