Flexbox, как выровнять блоки по краю и по центру одновременно?

Question

[Cheizer]

Друзья, подскажите, как выровнять flex блоки, по краям, но что бы второй ряд, если не полный, было выравнивание по центру?

Если поставить: justify-content: space-between; то порядок, но если есть второй ряд, то там это смотрится ужасно.


Если поставить justify-content: center; смотрится второй неполный ряд как нужно, но нужно добавлять отступы элементам, что бы не прилипали друг к другу, и из за этих отступов, они не прикасаются к краям родительского блока, а нужно что бы были по краям блока родителя.


Как поступить что бы выравнивание неполного ряда было по центру, а общее выравнивание было по краю родителя?

Вот поднял https://codepen.io/Cheizer/pen/gJMjRg

Comments

[Сергей delphinpro]

Можно в этом направлении поколдовать https://codepen.io/anon/pen/wbWNLo

[Cheizer]

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

[Сергей delphinpro]

Роман Кузнецов, ну да. с фиксом простого решения не будет.
Тут вот так https://codepen.io/anon/pen/zQBbYm
Но придется написать несколько медиазапросов или javascript задействовать, чтобы менять стиль у крайнего левого в последнем ряду.
и опять же margin у блоков.

[Cheizer]

Сергей delphinpro, да, видно нельзя еще так сделать просто, на css, я думал технологии уже продвинулись, а нет/ Придется через calc и 4 медиа запроса дополнительно делать.

Answer 1

[Ankhena]

Вариантов полно разных
Можно считать nth-child и ставить/убирать отступы https://codepen.io/anon/pen/KLMxyO (calc у меня там в развернутом виде, нужно сократить).
Можно имитировать отступы с помощью border или box-shadow.
Можно использовать padding вместо margin и, возможно, доп обертку внутри итемов.
Можно сделать доп контейнер и задать отрицательный margin для компенсации "выпирающих" margin у итемов.
Можно приплести js.

Comments

[Шохрух Шаймардонов]

Ну да. Как пример использовал относительно простой вариант

[Шохрух Шаймардонов]

Ankhena, не пойму, что?) я имел ввиду что я показал пример, который, тоже работает и можно использовать, если заранее известно количество карточек, а если неизвестно, то уже применить в связке с js. К сожалению не смотрел ваш вариант) но посмотрю обязательно, позже)

[Cheizer]

Все круто, но с медиа запросами можно и на чистом flex сделать. Без calc.

[Ankhena]

Роман Кузнецов, покажите?

[Cheizer]

Ankhena, так же как вы сделали, только выравнивание по центру, каждый блок только справа отступ, и каждый четвертый справа отступ убираю. Отступами и размерами блоков подогнал под общую ширину родителя. При уменьшении буду через медиа менять только каждый 4,3,2 и вообще потом сброшу.

[Ankhena]

Роман Кузнецов, можно кодом про отступы при таком раскладе?

[Cheizer]

Ankhena, пока так сделал https://codepen.io/Cheizer/pen/gJMjRg

[Cheizer]

Ankhena, но ваш вариант с calc пока самый лучший, сложноват, но работает. Разберу его сейчас.

[Ankhena]

Роман Кузнецов, ну так в вашем варианте в первой строке не получается вида как у justify-content

но ваш вариант с calc пока самый лучший, сложноват, но работает. Разберу его сейчас.

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

Answer 2

[Dymok]

можно задавать ширину в процентах:

Comments

[Cheizer]

спасибо, но так не работает flex адаптация.

[Cheizer]

Добавил min-width:200px; к блокам, и вроде порядок, как нужно.

[Cheizer]

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

Answer 3

[Шохрух Шаймардонов]

.flex-container::after {
  content: ""
  width: 250px
}

решит проблему. ширину можно выставлять n*250px, где n - количество блоков, которых не достает, чтобы строка стала полной

Comments

[Cheizer]

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

[Шохрух Шаймардонов]

Роман Кузнецов, это если у вас 7 карточек из 8, к примеру, и нужно чтобы как вы хотите отображалось. А если количество карточек будет меняться. То и соответственно ширину ::after можно менять минимальным количеством js

[Ankhena]

Шохрух Шаймардонов, покажите, пожалуйста, пример, где с помощью after последняя строка будет центрирована.
И заодно, как на js менять ширину after?

[Шохрух Шаймардонов]

Ankhena, кажись я изначально вопрос прочитал неверно. В моем примере последняя строка будет выравниваться как flex-start.

[Ankhena]

Шохрух Шаймардонов, угу, для flex-start да, доп.блоками или псевдо

Answer 4

[forspamonly2]

технологии продвинулись 20 лет назад, ещё ие 5.5 умел.

https://codepen.io/anon/pen/zQBQjW

обколются своими флексами...

Comments

[Cheizer]

нет, у вас правый 4 блок не примыкает к краю родителя, а в этом суть.

[forspamonly2]

нет, это у вас несимметричные маржины прописаны были.

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

https://codepen.io/anon/pen/xNONWJ

[Cheizer]

forspamonly2, вот кстати с отрицательными margin вариант, нужно только подумать как на flex так же сделать.