Как выровнять вложенные блоки flex wrap с левой стороны НО при этом чтобы сам родительский блок был выровнен по центру?

Question

[Сергей К]

Обратите внимание что общий блок выровнен с лева хотя я все что мог отцентровал. Наверно нужен какой-то костыль?

https://codepen.io/sergej-korolew/pen/rNmqdqv

Comments

[Ankhena]

Видимо, не всё

.squars {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    border: 1px solid black;
}

[Сергей К]

Ankhena, Спасибо за совет но не помогло

[Сергей К]

Ankhena, все также общий блок выровнен слева

[Ankhena]

Сергей К, это не совет.
У вас общий блок занимает всю доступную ширину.
Без разницы, куда вы будете его выравнивать, ничего не изменится.

[Сергей К]

Ankhena,
вот смотрите как получается

[Ankhena]

Сергей К, почему вы не хотите выставить элементы по центру, а хотите центрировать сам блок?

Ну обведите его рамочкой, чтобы увидеть, что он занимает всю доступню ширину.

[Сергей К]

Ankhena, на самом деле корневой блок имеет ширину 1440 и на большом экране хорошо заметно как внутренние элементы прижимаются влево
хотя все блоки должны находиться по центру экрана с условием блоки которые не помешаются в ширину экрана должны появляться слева

Я так понимаю что стандартными силами flexbox этого не добиться. Нужен какой-то костыль?

[Ankhena]

Сергей К, так и squars тоже, по всей видимости, имеет ширину 1440 (с учетом отступов, если они у кого-то есть)

Обведите его рамкой, чтобы понять, что происходит

[Сергей К]

Ankhena, все обвел в рамку

[Ankhena]

Сергей К, отлично.
Теперь вы видите, что выравнивать squars внутри родителя бесполезно? Что там нет места на выравнивание?

Если вы зададите или ограничите ему ширину, то он сможет встать по центру.

P. S. А ещё лучше замените флексы на гриды и выровняте карточки внутри блока.

[Сергей К]

Ankhena, да но я не хочу ширину сужать т.к. все равно на более маленьком разрешении эта проблема повторится.

Я хочу только флексбоксами выполнить все (если конечно это возможно)?

Гриды еще не освоил.

[Ankhena]

Сергей К, флексами без костылей последняя строка тоже будет центрирована

[Сергей К]

Ankhena, подскажите костыль без гридов и js пожалуйста?

[Ankhena]

Сергей К, если в строке не больше 3 элементов, то хватит псевдоэлементов. Если больше, то делают пустые блоки с нулевой высотой и шириной как у обычных блоков. Они занимают место и не дают блокам в последней строке переехать в центр.

Но при наличии гридов и без требований поддержи ИЕ, заниматься этом как-то не очень.