Как отцентрировать блок и прижать последнего ребенка в нем?

Question

[HealSpirit]

Здравствуйте, прошу сильно не пинать, только учусь. Хочу сверстать для начала вот такую шапку:

Решил, что содержимое header'a нужно обернуть в центровщик с определенной шириной, а самому header'у задать фон, чтобы он растягивался на всю ширину.

<div class="header-top">
  <div class="layout-positioner">
    <span class="logo">Aditii</span>
    <input class="search" type="text">
    <span class="shopping-card">$300</span>
  </div>
</div>

Но кроме ширины центровщику приходится задавать еще и display: flex. Разумно ли это? Или в центровщик нужно вставить еще один, "настоящий header", которому впоследствии зададим display: flex?

.logo,
.search,
.shopping-card {
	border: 1px solid red;
}
.header-top {
	background-color: grey;
}
.layout-positioner {
	display: flex;
	max-width: 640px;
	margin: 0 auto;
	background-color: lightgrey;
}
.search {
	flex-grow: 2;
}

И второй вопрос, я хочу прижать к правому краю корзину товаров. Как я понимаю это можно сделать двумя способами: родителю задать justify-content: space-between или задать полю поиска flex-grow: 2, но с другой стороны мне нужно не только прижать корзину товаров, но и не растягивать слишком сильно поле поиска. Если задать полю поиска какую нибудь максимальную ширину, то одновременно она и flex-grow: 2 не работают.
Ссылка №1
Как здесь поступить? Обернуть поле поиска в какой нибудь див и ему задать flex-grow: 2? Но в этом случаю я почему-то не смогу изменить ширину поля поиска и мне приходится его центрировать задав новому диву text-align: center?
Ссылка №2
В конечном итоге я хочу, чтобы при изменении ширины сначала уменьшалось свободное пространство между логотипом и полем поиска; полем поиска и корзиной товаров, а затем уменьшалось само поле поиска.

Answer 1

[doweb]

Такой эффект?

Comments

[HealSpirit]

Не совсем, тут поле поиска прижато к логотипу, а мне нужно чтобы оно постоянно было по центру.
Короче, я добавил еще и margin-left: auto и заработало как я и хотел. Но нельзя ли проще?
Ссылка №3

[doweb]

По мне это решение помоему достаточно простое, чтобы задумывать о поиске более простого варианта

Можете сократить margin: 0 auto для поиска
Убрать flex-grow задать width: 100%, и с помощью max-width регулировать ширину поиска

[HealSpirit]

Konstantin, с этим разобрались, спасибо, а что на счет центровщика? ведь он выполняет только центровку с определенной шириной, но кроме header'a я хотел бы его использовать и на другие блоки, которым display: flex может и не понадобиться?

[doweb]

Есть два варианта с центровщиком.

1. Использовать один цетровщик для всей верстки. При условии, что вам этот вариант подходит. Внутрь этого цетровщика вкладываете еще один блок (в том же бустрапе это row) и уже ему задаете свойства.
2. Использовать в каждом нестандартном блоке/секции свой центровщик.

Ничего ужасного не будет, если у вас будет несколько центровщиков на сайте.

[HealSpirit]

Konstantin, спасибо, отмечаю решением.