maksipes
@maksipes

Как задать порядок переноса flexbox элементов?

Есть вот такой лайаут:

https://codesandbox.io/s/throbbing-moon-lfhuk

Прошу прощения за кривую верстку, главное суть.

Тут все на flexbox - контейнер и в нем два элемента. В правом из них еще один контейнер, в котором Caption и еще контейнер, а в нем черные кнопки.

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

Как это можно сделать?

И еще - как сделать так чтобы элементы переносились или все сразу или не переносились вообще. Пример - кнопки будут переноситься так - сначала одна уйдет вниз, вверху останется три и т.д., а надо так - если места недостаточно для всех четырех, они все разом переносятся в столбик.

Буду благодарен за намеки, не обязательно полное решение. Спасибо.
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Devilz_1
1.
надо чтобы правый элемент целиком переносился вниз


Как вариант. Для достижения результата, нужно добавить этот медиа-запрос

@media (max-width: 526px) {
  .flexbox-container-1 {
    display: flex;
    flex-direction: column;
  }
  .flex-item-1,
  .flex-item-2 {
    width: 100%;
  }
}


Т.е. при уменьшении экрана до 526px блоки с классами flex-item-1 и flex-item-2 должны быть во всю ширину (width: 100%), а их родитель (flexbox-container-1) должен отображать детей в столбик (flex-direction: column).

2.
И еще - как сделать так чтобы элементы переносились или все сразу или не переносились вообще. Пример - кнопки будут переноситься так - сначала одна уйдет вниз, вверху останется три и т.д., а надо так - если места недостаточно для всех четырех, они все разом переносятся в столбик.


Вот наглядный пример
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы