Flexbox: располагаем варианты выбора на странице

История уже завершена: переходы работают и исходы отличаются. Сегодня улучшим управление. Варианты выбора будут располагаться рядом, когда хватает места, и переноситься на узком экране. Проверим, что длинные подписи помещаются, а ссылки удобно выбирать с клавиатуры.

Открыть результат в отдельной вкладке

Какие файлы понадобятся

Возьми финал истории с промежуточной сценой. В ней nav class="choices" содержит абзацы со ссылками в начале и у терминала. Если делаешь свою историю, добавь такой контейнер к группе вариантов. Содержимое файлов и адреса ссылок не меняем.

Почему блоки сейчас идут сверху вниз

Обычный поток документа располагает блочные элементы последовательно. Абзацы занимают доступную ширину, поэтому каждый вариант начинается с новой строки. Не нужно вытаскивать их из потока через position: absolute: при длинном тексте и другом экране координаты пришлось бы подбирать заново.

Flexbox меняет расположение непосредственных детей контейнера. У нас контейнер — .choices, дети — абзацы со ссылками. Добавь в конец общего style.css:

/* Контейнер управляет расположением вариантов выбора. */
.choices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
}
.choices p {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}
.choices a {
  display: block;
  padding: 12px;
  min-height: 48px;
  border: 1px solid #b9acce;
  background: #f2edff;
  overflow-wrap: anywhere;
}

Разберись в осях и переносе

display: flex включает расположение по одной главной оси. flex-direction: row направляет её по строке. В данном интерфейсе это слева направо. justify-content: flex-start собирает элементы у начала главной оси, а align-items: stretch растягивает их по поперечной — здесь вертикальной. Если поменять направление на column, главной станет вертикальная ось.

gap: 12px задаёт промежутки между элементами. flex-wrap: wrap разрешает перенести элемент, когда он не помещается. Свойство flex: 1 1 220px у абзаца означает: разрешено расти, разрешено сжиматься, исходный размер 220px. Это настройка элемента, а не контейнера. min-width: 0 позволяет ему ужиматься; перенос длинного слова разрешён у ссылки через overflow-wrap.

У ссылки display: block расширяет кликабельную область. padding создаёт место вокруг текста, min-height сохраняет удобную высоту короткого варианта. Мы не фиксируем высоту: длинный вариант увеличит блок и останется читаемым.

Проверка step-01: открой начало и терминал, сузь окно. Варианты должны переноситься без горизонтальной прокрутки. Ссылки всё ещё ведут по прежним адресам.

Расположи варианты в колонку на узком экране

Для совсем узкого окна расположим варианты строго в колонку и уменьшим поля. @media применяет правила только при выполнении условия ширины. Добавь:

@media (max-width: 420px) {
  body {
    padding: 12px;
  }
  .story {
    margin: 12px auto;
    padding: 16px;
  }
  .choices {
    flex-direction: column;
  }
  .choices p {
    flex: none;
  }
}

Здесь 420px — граница оформления этого примера, а не обязательная ширина всех телефонов. flex: none отменяет размер 220px: после перехода в колонку исходный flex-размер относится уже к высоте. Проверь: карточки не стали огромными вертикальными плитками.

Проверь фокус и все страницы

Клавишей Tab выбери первую ссылку, Enter открой её, затем вернись. Рамка :focus-visible из прошлого урока должна оставаться видимой. Проверь начало, промежуточную сцену и каждое окончание на ширинах 320px и 1280px. На узком окне допускается вертикальная прокрутка: нельзя скрывать часть истории через overflow: hidden у body.

Самостоятельно: настрой варианты выбора

На копии истории добавь один очень длинный вариант действия. Затем сделай так, чтобы до 520px варианты шли строго в колонку, а выше возвращались в строку с переносом. Прежде чем обновить страницу, предположи, как расположатся варианты. Проверь все переходы клавиатурой и сравни поведение на 500px и 700px. Убедись, что длинную подпись можно прочитать целиком и ссылка по-прежнему открывается.

Проверь свою первую игру

Найди в своей истории ветку, которую ты добавил самостоятельно. Объясни её схему, найди CSS-правило для предупреждения и покажи, почему ссылка открывает нужный файл. Затем попроси другого человека пройти историю без твоих подсказок или пройди все пути по записанной схеме сам. Наблюдай, понятны ли другому человеку варианты выбора и легко ли ему вернуться к началу.

Готово: история имеет начало, осмысленные выборы, разные исходы и возврат; оформление единое, длинный текст доступен, при выборе ссылки с клавиатуры видна рамка фокуса. Тебе не нужно помнить каждое CSS-свойство: важно найти правило, предсказать изменение и проверить его.

Подробнее о свойствах: Flexbox в MDN. Читать справочник целиком перед следующим шагом не нужно.