Как сделать нормальный wrap на flexbox?

Question

[darksladen]

Решил поюзать я флексы, но столкнулся о проблеме, которая как я слышал еще не решена. Когда блок врапается, он становится по центру, возможно ли изменить это поведение?

Такая вот картина...

Comments

[Сергей delphinpro]

justify-content: flex-start

[darksladen]

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

[darksladen]

min-width: 280px;
max-width: 400px;

я вот так размер задаю.. Если задавать flex-basis то этот блок вовсе растягивается на всю ширину

[Сергей delphinpro]

darksladen, друг, выражайся яснее. То тебе не надо по центру, то надо.
Ну сделай пример, нарисуй картинку, как надо, что ли..

[darksladen]

Сергей, вообщем сори, понял что без медиа запросов никак, все равно нужен контейнер с фиксированной шириной, которую и надо менять.. https://codepen.io/anon/pen/YrNXxz - вот что получилось, но блоки не очень послушные выходят.. Видео посмотрел и что то показалось, что действительно возможно сделать без медиа запросов, но без них контроля никакого =(

[Сергей delphinpro]

darksladen, Теперь понятно.
Есть вот такой хак https://codepen.io/anon/pen/pWRjbQ
Полностью вашу проблему не решает, но расширяет пределы нужного отображения и позволяет уменьшить количество медиазапросов.

[darksladen]

Сергей, спасибо, интересный хак )

[darksladen]

Сергей, https://codepen.io/anon/pen/bogpjR смотри, как получилось.. Подскажи, почему то все же едит на большом разрешении

[Сергей delphinpro]

darksladen, ну то что я говорил - неполное решение проблемы. медиазапрос тут все-таки понадобится - https://codepen.io/delphinpro/pen/RLKoNz?editors=1100

[Сергей delphinpro]

подкрасил рамками для ясности

[SelenIT3]

Нужно примерно такое поведение?

Answer 1

[SuperToster]

Слухи вас обманывают. Кроме того это задача, а не проблема : )
https://jsfiddle.net/a25z8uy6/1/
ещё вариант по просьбе ТС:
https://jsfiddle.net/9vdes60x/1/

Comments

[Максим]

я прошу прощения , я пишу как обычный обыватель, на скрине одиночный пост находится по центру

[darksladen]

хм.. Не совсем понял что за проблему решает ваш код!
1) Где мой адаптив
2) Зачем max-width, если flex-basis стоит?
3) Зачем wrap, если он не используется, так как ширина всегда будет 33%?

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

[SuperToster]

Максим Ленский,

Решил поюзать я флексы, но столкнулся о проблеме, которая как я слышал еще не решена. Когда блок врапается, он становится по центру, возможно ли изменить это поведение?

М. Не увидел о 100%... Подскажите чего я не заметил?)
ps. Если 1 то 100%? А если 2 то по 50%? Можно и так сделать.

[SuperToster]

darksladen, мой код решает проблему, которую вы описали в своём запросе. Дословно.

Какой "ваш адаптив", вы показали одну картинку.

Пишите подробней.
Пожалуйста, сделал вариант который просил Максим Ленский: https://jsfiddle.net/9vdes60x/1/ мб речь об этом? Попробуйте менять ширину окна с примером и количество элементов.

В общем пишите подробнее, разберёмся как сделать лучше : )

[Максим]

SuperToster, я же поправил свой коммент , но всё таки не имел ввиду table-cell я , в попыхах ответил шляпу какую то , inline-block имел ввиду

[SuperToster]

darksladen,
В общем. Задачу я так и не понял.
1. https://jsfiddle.net/a25z8uy6/1/
2. https://jsfiddle.net/9vdes60x/1/
Это не то?

Если нет, покажите схематичную картинку - что именно должно происходить, при каких условиях.
Тогда я смогу вам помочь.

[Максим]

SuperToster, вопрос же не мой ... я сам могу реализовать любую задачу ... лижбы без давления моды

[darksladen]

SuperToster, Я хотел сделать автоадаптив без единого медиа зпроса с помощью wrap.. Вот что хотел - https://codepen.io/anon/pen/bogpjR Но здесь единственный минус, это что блок врапающийся оказывается в центре, но этого конечно никак не избежать.

С медиа запросами конечно все без проблем можно сделать, у вас в примере кстати все равно не то что нужно.. Последний блок когда спадает на новую строку он на всю ширину растягивается.

Вообщем в любом случае надо делать контейнер, как в бутстрапе и фигачить также как на флотах. Хотя в моем примере вроде все круто, за исключением блоков которые скатываются немного не по моему хотению.

[darksladen]

Извиняюсь если вопрос тупой и непонятный, только начал осваивать флексы, там еще видео посмотрел где говорят про эту проблему на конференции и чувак сказал, что они всем офисом не смогли ее решить =) А в другом видео услышал, что медиазапросы по минимому можно использовать, но это не так, если хочешь сделать достаточную гибкость, как оказалось =(

[darksladen]

SuperToster, Офигеть, получилось!!!! https://codepen.io/anon/pen/bogpjR - с хаком Сергея.. Теперь единственная проблема - я не понимаю как это работает )))

Answer 2

[Максим]

Но всё таки вставлю свои пять копеек
Если задачу возможно решить без флекса то уж лучше обойтись , это на display:inline-block; делается легко и само получается адаптивно
https://codepen.io/simkaUser/pen/EwZPZm?editors=1100 -- display:inline-block
https://codepen.io/simkaUser/pen/NadNWr?editors=1100 -- flexbox хотя наверно я не понял суть

Comments

[darksladen]

на css table? Решение из 90-х? =) хм.. Тогда уж флотами

[Сергей delphinpro]

с врапом ячеек? покажете?

[darksladen]

Сергей, да, мне тоже интересно кстати ) Может css grid имелся ввиду

[Максим]

darksladen, за то работает так же как и у флекса

[Максим]

Сергей, я может и не знаю что такое врап ячеек , что это такое ?

[Сергей delphinpro]

Максим Ленский, wrap - завернуть. Имеется ввиду перенос ячеек на вторую строчку

[Максим]

Сергей, https://codepen.io/simkaUser/pen/EwZPZm?editors=1100 я может быть что то не правильно сделал или не понял ?? но конечно это не table-cell

[SuperToster]

darksladen, display:table - это не "решение из 90". Это решение для табличных данных, даже в 2017. Ответил вам в своём посте, и сделал ещё один пример.

[Максим]

SuperToster, я не спорю ... хоть их 90х но это единственный (наверно) если не учитывать гриды конкурент флекса , а по крайней мере перенос работает

[darksladen]

Да, все круто.. Но вот этот блок по центру стоит все равно =( https://codepen.io/anon/pen/bogpjR - тоже самое

[Максим]

darksladen, так он должен быть НЕ ПО ЦЕНТРУ ?

[darksladen]

Максим Ленский, да ) " Когда блок врапается, он становится по центру, возможно ли изменить это поведение?" я же даже фотку приложил )

[darksladen]

Но по сути это невозможно сделать, контейнер нужен

[Максим]

darksladen, наверно на самом деле не возможно ...

[darksladen]

Максим Ленский, Офигеть, получилось!!!! https://codepen.io/anon/pen/bogpjR - с хаком Сергея.. Теперь единственная проблема - я не понимаю как это работает )))