Как разместить сам flex-контейнер (котором есть перенос по рядам) по центру?

Question

[Tyusha]

Внутри div.operation-selector находятся flex-плавающие блоки, которые переносятся (wrap-flex: wrap) по рядам с выравниванием по левому краю — всё хорошо, так и хочу, как на первой картинке. Однако мне надо, чтобы весь div.operation-selector как целое был выровнен по центру, как показал красным пунктиром.

Если сделать justify-content: center, то получаю вторую картинку. Но мне надо, чтобы блоки в неполном ряду выравнивались влево.

Что я должна сделать? Всё это, как видите, находится в свою очередь в grid.

Comments

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

А что мешает использовать grid?

Вообще раньше эту задачу решали добавлением нескольких фейковых блоков с нулевой высотой в конец.

[Tyusha]

Lynn «Кофеман», мешает то, что нужен flex, а не grid для переноса по рядам переменного количества блоков (в данном случае 4, но может быть другое количество). Ибо нужна адаптивность.

[Ankhena]

Tyusha,

нужен flex, а не grid для переноса по рядам переменного количества блоков (в данном случае 4, но может быть другое количество). Ибо нужна адаптивность

И почему не использовать грид?

А по теме вопроса, вариантов центрирования полно. Из простых margin-inline auto, указав ширину этого вашего пунктира или те же флексы/гриды родителю.

Но мне надо, чтобы блоки в неполном ряду выравнивались влево.

Можно добавить after с flex-grow, чтобы занял всё доп пространство.
Либо использовать гриды.

Answer 1

[Rsa97]

Вы бы лучше вместо картинок сделали пример на том же JSFiddle или CodePen.
А так, в общем случае

div.operation-selector {
  width: 860px;
  margin: auto;
}