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

Question

[Panda21]

Добрый день.
Мне надо выравнять по центру инпуты - поле ввода и кнопку (флекс-элементы) внутри формы (флекс-контейнера).
Если не задаю ширину флекс-контейнеру, то 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;
}

Comments

[Антон Федорян]

работает вроде

[Panda21]

Извиняюсь, я неправильно выразилась. Сама запуталась уже х) Он выравнивается, но серый фон формы на всю ширину заливается, а мне надо чтобы форма была по центру и по бокам ничего не было.

Answer 1

[0xD34F]

В качестве ширины флекс-контейнера (570px) задаю сумму ширин флекс-элементов (390px + 180px).

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

Предположу, что вам надо на самом деле выравнять контейнер по центру страницы - добавьте margin: 0 auto элементу .subscribe-form, например.

Comments

[Panda21]

О, спасибо большое. Ничего не меняла и просто добавила margin: 0 auto; для формы и всё встало как нужно. Я и раньше пыталась выравнять с margin: 0 auto, но не получалось так, как мне нужно было. Как я понимаю, вы писали про то, чтобы задать только margin: 0 auto, а у меня заработало только когда margin: 0 auto вместе с justify-content и когда сумма ширин элементов равна ширине контейнера. Хоть сейчас и работает, но мне кажется, что это должно делаться по-другому :/ Однако ещё раз спасибо))

Answer 2

[Константин Боровик]

Если не задаю ширину флекс-контейнеру, то jutify-content работает

Вы сами ответили на свой вопрос. Если вам нужно выровнять внутренние элементы то просто уберите ширину - это не inline объекты. Если вы хотите выровнять всю форму, то оберните её в div и примените flex-свойства:

<div style="display:flex;justify-content:center">
  <form>
  <input class="subscribe-field">
  <input class="button-subscribe">
</form>
</div>

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

Comments

[Panda21]

Ну, это да, я и сама поняла, что дело в ширине, но, как и писала в вопросе, гуглила по этому поводу, но так и не поняла всё равно.

Как дочерние объекты выравняются если вы ограничили свободное пространство до их суммарной ширины.

Спасибо за формулировку, посмотрю по этой теме.