@Panda21

Почему не работает justify-content, если задаешь ширину флекс-контейнеру?

Добрый день.
Мне надо выравнять по центру инпуты - поле ввода и кнопку (флекс-элементы) внутри формы (флекс-контейнера).
Если не задаю ширину флекс-контейнеру, то jutify-content работает, а если задаю - то нет. Гуглила насчет ширины флекс-контейнера, так ничего и не нашла нужного. Только что "flex-контейнер по умолчанию обжимается по ширине контента, поэтому ширину нужно задавать явно", но всё равно не понимаю. В качестве ширины флекс-контейнера (570px) задаю сумму ширин флекс-элементов (390px + 180px).
Ширина и цвет фона для формы мне нужны, чтобы между полем ввода и кнопкой был фон как у поля ввода. Может, это можно сделать по-другому?
Главный вопрос - как можно выровнять по центру элементы формы? Что я делаю не так?
Для упрощения восприятия кода оставлен только необходимый код для разрешения вопроса, поэтому нет необходимых атрибутов и т.д., чтобы не отвлекать. В песочнице
<form class="subscribe-form">
  <input class="subscribe-field">
  <input class="button-subscribe">
</form>

.subscribe-form {
  display: flex;
  justify-content: center;
  width: 570px;
  background-color: #f8f8f8;
  border-radius: 25px; 
}

.subscribe-field {
  border: none;
  background-color: #f8f8f8;
  height: 45px; 
  width: 390px;
  border-radius: 25px; 
}

.button-subscribe {
  border: none;
  height: 45px; 
  width: 180px;
  background: tomato; 
  border-radius: 25px;
}
  • Вопрос задан
  • 1461 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
В качестве ширины флекс-контейнера (570px) задаю сумму ширин флекс-элементов (390px + 180px).

Если сумма ширин элементов равна ширине контейнера - о каком выравнивании может идти речь? Есть выравнивание, нет его - внешне разницы не будет.

Предположу, что вам надо на самом деле выравнять контейнер по центру страницы - добавьте margin: 0 auto элементу .subscribe-form, например.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@PushMeNow
.NET Developer
Если не задаю ширину флекс-контейнеру, то jutify-content работает

Вы сами ответили на свой вопрос. Если вам нужно выровнять внутренние элементы то просто уберите ширину - это не inline объекты. Если вы хотите выровнять всю форму, то оберните её в div и примените flex-свойства:
<div style="display:flex;justify-content:center">
  <form>
  <input class="subscribe-field">
  <input class="button-subscribe">
</form>
</div>

А вообще повнимательнее почитайте свойства flex-объектов. Как дочерние объекты выравняются если вы ограничили свободное пространство до их суммарной ширины.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы