Flexbox: форма с инлайн-полями

Форма с инлайн-полями — горизонтальная раскладка label + input + кнопка на одной строке, реализуемая через Flexbox.

Зачем нужно

Инлайн-формы встречаются повсеместно: подписка на рассылку, поиск, фильтры. Flexbox идеален: align-items: baseline выравнивает разновысокие элементы по базовой линии, flex: 1 растягивает поле на всё свободное место, кнопка остаётся фиксированной.

Где используется

  • Email-подписка (поле + кнопка)
  • Поисковая строка с кнопкой
  • Инлайн-фильтры каталога
  • Строка ввода в чате
  • Комбо полей в форме (имя + фамилия)

Основной контент

Email-подписка

.subscribe-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
}

.subscribe-form__input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}

.subscribe-form__button {
  flex-shrink: 0;
  padding: 10px 20px;
  background: #0070f3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

<form class="subscribe-form">
  <input class="subscribe-form__input"
         type="email" placeholder="your@email.com">
  <button class="subscribe-form__button" type="submit">
    Subscribe
  </button>
</form>

Поиск с иконкой внутри

.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 4px 12px;
  gap: 8px;
}

.search-bar__icon { flex-shrink: 0; color: #888; }
.search-bar__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 6px 0;
}

Инлайн с label

.field-inline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.field-inline__label {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 500;
}

.field-inline__input {
  flex: 1;
  min-width: 0;
}

Имя + фамилия (два поля)

.name-fields {
  display: flex;
  gap: 16px;
}

.name-fields > .field { flex: 1; min-width: 0; }

@media (max-width: 480px) {
  .name-fields { flex-direction: column; }
}

Адаптивная форма с переносом

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-row__input {
  flex: 1 1 200px; /* Растёт, перенос если < 200px */
}

.form-row__button { flex-shrink: 0; }

Частые ошибки

  • Забыт flex-shrink: 0 на кнопке — кнопка сжимается и текст переносится
  • min-width: 0 на input — без него input с длинным значением выйдет за контейнер
  • align-items: center vs baseline — baseline лучше для разновысоких элементов (label + input)

Связанные темы

Ресурсы