Перенос div на новую строку при адаптивном режиме?

Question

[art style]

https://codepen.io/aptypkaa/pen/eYNYmXz
есть блок в котором 4 блока в ряд... все 4 блока по 25% ширины... итого 100% во весь блок... мне надо чтобы они
равномерно и адекватно складывались в столбик при уменьшении экрана
display:flex и flex-wrap:wrap не помогает

Comments

[kulaeff]

Так пропишите media queries для разных разрешений.

[art style]

kulaeff, Только так? какого-то автоматически адаптивного варианта нету?

[Froggyweb]

25% ширины... итого 100%

нет есть еще бордеры
адекватно это как? make-pizgato - в разработке
так все переносится что сказали

* {
  box-sizing: border-box;
}

#main {
  width: 100%;
  background-color:#000;
  display:flex;
  flex-wrap: wrap;
  color: pink;
}

.asd {
  flex: 1 0 25%;
  min-width: 100px;
  border: #fff solid 1px;
}

[kulaeff]

art style, а откуда браузеру знать, на каком разрешении складывать квадраты в столбик? Особенно если квадраты имеют относительный размер.

[art style]

всем спасибо. ответ на вопрос простой: чтобы все было ровно нужно обернуть по 2 блока в еще один блок и задать им ширину и другие параметры... далее через media уже манипулируем этими блоками-обертками и содержимыми в них...
я просто не люблю такие каскадные структуры... люблю когда все просто 1 секция - 4 адаптивных блока внутри... но к сожалению так не получается..
получилось
-div
--div
---div
---div
--div
---div
---div

[Виталий Першин]

art style, Кто-нибудь вызовите экзорциста..

[Froggyweb]

art style, никогда так не делай.

[art style]

Froggyweb, какие варианты тогда следующего исполнения?

нужно чтобы с 1920->1200 4 в ряд
далее с 1120->992 2 ряда по 2
992> и тд 1 ряд по 1 итого 4 ряда..

[Froggyweb]

art style, смотри как это делает бутстрап к примеру

Answer 1

[WapSter]

https://codepen.io/wapster92/pen/qBdBdEp примерно так. Но лучше медиа запросами.