Как сделать колонки подобной формы?

Question

[Fehax]

Доброго вечера! Дайте подсказку, как реализовать такую идею на флексах?
Слишком уж мало опыта, не сталкивался ещё с этим. Мне в принципе даётся сложно двуколочные секции, постоянно путаюсь. Не могу понять алгоритм - что во что вкладывать, что чему присваивать

https://codepen.io/Fehax/pen/poLYoRp - код, который у меня есть. там отдельно для этой секции стили, я их обозначил.

Comments

[Fehax]

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

[Фёдор]

Fehax, у вас обязательное условие, чтобы было на флекасах?

[Fehax]

Фёдор, да, точно. без bootstrap, js. только на флексах.
я просто знаю только их

[Fehax]

Допустим, слева можно разместить с помощью positin:absolute. Ограничить ширину и выстроить друг под другом, как в фигме.
Справа, я подумал, что можно для остальных 4 элементов, которые ниже расположены, задать тоже position: absolute и всё влепить, но тогда будет неудобно делать адаптив для этой секции. Возможно, есть более "гуманные" способы..

Answer 1

[Фёдор]

Делите макет пополам. На 50%. Во второй колонке верстаете два блока. Второму блоку задаёте верхний отступ.


upd: Ещё можете изучить основы Grid.

Comments

[Fehax]

спасибо огромное, то, что мне нужно. буду пробовать!

Answer 2

[Fehax]

Как я всё реализовывал: поделил секцию на два блока, задал им max-width: 50% ( получается 50% от контейнера в котором они лежат, по задумке. у меня это .container-content). Дальше второй блок с max-width: 50% я делю ещё на два блока с классом .column, задаю им max-width по 25%.
Вышло такое

Исправил таким образом. Теперь вопрос? Я не могу поднять правую сторону к верху, поднимается и текст слева, который в синем квадрате.

Comments

[Fehax]

минусовой margin-top не работает, паддинга там нету..

[Фёдор]

Боже, чувак, ты даже не знаешь флексы. Иди почитай документацию

[Fehax]

Фёдор, flex-start там тоже не работает, если что. Что перечитать коонректно?

[Fehax]

исправил, всё нормально. Там было написано display: inline-block
Большое спасибо

[Фёдор]

Fehax, Наглядное пособие. Почитайте внимательно, какое свойство как работает. Вам даже не пришлось бы использовать max-width и т.п.