Как отцентрировать один элемент внутри flex контейнера?

Question

[Kardamon90]

Добрый день. Есть три блока разной величины расположенных горизонтально внутри контейнера. Нужно второй блок расположить ровно по центру по горизонтали.

Comments

[Lynn «Кофеман»]

Код в студию

[Сергей delphinpro]

Lynn «Кофеман», да обычная фигня. Сто раз спрашивали...

.flex
  .child(width=100)
  .child // Должен быть в центре
  .child(width=300)

[Kardamon90]

Сергей delphinpro, такое можно сделать только фиксированной шириной?

[Сергей delphinpro]

Kardamon90, в общем случае да.
Можно центральный повесить абсолютом.
Можно скриптом увеличить меньшую ширину до большей.
Можно задать ширину центральному, а боковые увеличить на оставшееся место.
Зависит от конкретной ситуации.

[Lynn «Кофеман»]

Сергей delphinpro, Kardamon90,
> Зависит от конкретной ситуации.
собственно поэтому и «код в студию»

[Сергей delphinpro]

Lynn «Кофеман», тогда уж лучше кусок макета с описанием требуемого поведения.

[Lynn «Кофеман»]

Сергей delphinpro, пожалуй да

[Kardamon90]

Сергей delphinpro, Lynn «Кофеман»,
Все блоки сверстаны, дело осталось за расположением. У меня выходит так, что центральный блок с навигацией смещен немного вправо, потому что делает одинаковые отступы от боковых элементов, которые не равны по размерам

[Сергей delphinpro]

Kardamon90, можно грид попробовать

grid-template-columns: 1fr 2fr 1fr;

ну и выравнивание в крайних блоках, у левого влево, у правого вправо.

Или то же самое на флексах, только кода больше. Задавать flex-basis для блоков

Answer 1

[GeminiX]

у родителя
justify-content: space-between;

Comments

[Kardamon90]

Из-за того, что блоки разные по размерам, идеально отцентрировать не получается таким способом

[GeminiX]

прикрепите код, примерно увидеть что там за блоки