Как выровнять флексбокс-плитку?

Question

[Полина Емельянова]

И снова здравствуйте!

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

СПАСИБО!!! за помощь с сеткой, на мой вопрос про плитки, но теперь начался другой ад.))
и выглядит он так, что я не могу контролировать ширину! (а по идее адоптив должон быть) у потомков, которые мелкие новости...
codepen.io/emelyanova/pen/rWEYbd - вот как это сейчас. Т.е. ширина мелких новостей не контролируется... Хотя и задана.

Как тут поступить? Где я ошиблась? Что не учла? Что повторить и учить?
Заранее спасибо!

Comments

[Степан Крапивин]

я правильно понимаю, что мелкие блоки расположены горизонтально, а должны быть друг под другом? В этом проблема?

[Полина Емельянова]

Степан: да. сейчас я завернула мелочь в доп обертку, дала направление «колонка», т.е. flex-flow: column wrap; и этим отвязалась от высоты. Другими словами в родителе теперь только два потомка и они колонки. Но скорее всего, я чего не знаю.

[Полина Емельянова]

можно ли выстроить такую сетку без доп оберток?

[Степан Крапивин]

я как раз хотел посоветовать обернуть мелкие блоки в колонку.

[Полина Емельянова]

Степан: по ходу, я просто ... м... использовала флексы не по назначению. для такой штуки будут гряды, я так понимаю. вот в них бы и завернуть... Но это тема другой беседы. Все равно Спасибо!

Answer 1

[Anton fon Faust]

Ширина прекрасно контролируется с помощью flex-basis и flex-grow/flex-shrink
оттут все русским языком написано