Можно ли сделать, чтобы несколько элементов были в одну строку?

Question

[Muvka]

Есть контейнер flex с flex-flow: column wrap. Мне нужно, чтобы 2 flex-элемента шли в одну строку. Это можно сделать? row-wrap в моем случае не подходит, т.к. один из блоков по высоте должен занимать все оставшееся пространство.

Answer 1

[Матвей Феникс]

Как вариант, можно вложить в блок два твоих подблока, и уже их сделать row-wrap.

Comments

[Muvka]

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

[Матвей Феникс]

Скинь куда-нибудь код, и подпиши блоки один и два, которые должны быть в одну строчку)

[Muvka]

[Максим]

Muvka, это вы называете КОД ?

[Muvka]

А какой смысл в коде то? Я просто спросил, можно ли сделать при column два элемента в одной строке...

[Матвей Феникс]

Muvka, я бы решил это так https://codepen.io/matvey-phoen1x/pen/xzQVbE

[Матвей Феникс]

Muvka, c flex-flow: column wrap у вас ничего не получится, имитируйте это поведение через flex-flow: row wrap и размеры блоков.

[Muvka]

Да я уже думал. Но как сделать блок с описанием таким образом, чтобы он занимал все оставшееся пространство? Т.е. растягивался на всю высоту. Ведь где-то описание короче, где то длиннее. Где то вообще будет большой блок с таймером.

[Матвей Феникс]

Muvka, он нормально растягивается обычно 100% высотой https://codepen.io/matvey-phoen1x/pen/xzQVbE

[Muvka]

На ум приходит только использование jquery matchHeight, но тут проблема в том, что весь магазин будет на одной странице и значит и так перегружен, а еще вычислять несколько десятков блоков дополнительно - это будет ад, особенно для мобилок. И еще 1 вариант есть - рядом с картинкой запихнуть кнопку с ценой и скрыть до мобилки... Но не очень изящно, согласитесь.

[Muvka]

Матвей Феникс, Тогда он растягивается по ширине родителя на 100%. И блок становится ну очень высоким)

[Матвей Феникс]

Muvka, при чем тут высота и ширина? 100%, это мой пример, я не гадалка - по картинке верстать. Укажите родителю актуальную для ваших нужд высоту и не знайте горя. Все, что мы сейчас обсуждаем - это костыли, которые прекрасно лечатся гридами, а именно grid-template-areas под разные разрешения - разное положение блоков.