Флексбокс, часть 2 / Поля ввода с динамической шириной [23/28]
×

Поля ввода с динамической шириной [23/28]

Ещё один случай, когда может пригодиться флексбокс — поля ввода с динамической шириной. Требования к ним такие:

  • На одной строке с полем могут находиться другие элементы: кнопки, ссылки, подписи.
  • Размер дополнительных элементов не определён, он зависит от их содержимого.
  • При этом поле должно растягиваться на всё оставшееся в родительском контейнере место.
  • И изменять ширину при изменении размеров контейнера.

Решить эту задачу можно только при помощи флексбокса. Превратим контейнер поля ввода во флекс-контейнер, все элементы внутри него превратятся во флекс-элементы, базовый размер которых будет зависеть от их содержания — flex-basis: auto;. И останется только задать ненулевой коэффициент растягивания полям ввода.

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

Чтобы справиться с этими проблемами, надо задать всем элементам кроме полей ввода нулевой коэффициент сжатия, а самим полям ввода явно прописать минимальную ширину.

В этом задании в селекторах используется псевдокласс :not, который разбирается в курсе «Селекторы. Часть 2».

На момент написания курса в Safari и других WebKit-браузерах есть баг, из-за которого блоки могут позиционироваться некорректно.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Поля ввода с динамической шириной</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="subtle"> <div class="card"> <h1 class="card-title">Поля ввода с динамической шириной</h1> <div class="input-container"> <input class="input"> <button class="add-on icon-start">Запустить</button> <a href="#more">Подробнее</a> </div> <div class="input-container"> <span class="add-on">Количество</span> <input class="input"> </div> <div class="input-container"> <span class="add-on icon-search">Поиск</span> <input class="input"> <button class="add-on button">Искать</button> </div> </div> </body> </html>
.input-container { width: 450px; margin: 30px 0; outline: 2px dashed rgba(0, 128, 0, 0.2); outline-offset: 5px; } .add-on { display: inline-block; min-width: 40px; min-height: 36px; padding: 8px 12px; vertical-align: top; color: #666666; background-color: #eeeeee; border: 2px solid #cccccc; box-sizing: border-box; } .input { padding: 8px 12px; border: 2px solid #cccccc; } .input:not(:first-child) { border-left: 0; } .input:not(:last-child) { border-right: 0; } .input-container a { margin: 0 10px; font-size: 12px; line-height: 36px; color: #666666; }
HTML Academy
  1. Блоку .input-container задайте раскладку флексбокса,
  2. а для .input задайте коэффициент растягивания 1.
  3. Затем уменьшите ширину .input-container до 200px,
  4. для .add-on задайте нулевой коэффициент сжатия,
  5. а для .input задайте минимальную ширину 50px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый PHP #2, который стартует 22 августа.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.