Как правильно собрать такую сетку через flex?

Question

[Arman]

Задача: есть вертикальные блоки, которые должны занимать 60-70%, некоторые из них должны занимать 30-40%, быть справа и должны "выйти из потока", т.е. след блок ничего не должен знать про этот блок.

Сделал такое: https://codepen.io/anon/pen/OBLdvE

Тут вроде все работает, но не могу "выйти из потока". т.е. 3333 должны идти сразу за 1111, а 2222 сами по себе.

Желательно обойтись только css, верстку оставить как есть

Comments

[Сергей delphinpro]

На флексах такое не делается.

[Froggyweb]

Float?

Answer 1

[Flying]

Как вариант - просто использовать абсолютное позиционирование:

.flex > .right {
  flex-basis: 32%;
  position: absolute;
  width: 32%;
  right: 0;
}

Comments

[Сергей delphinpro]

Вы в курсе, что абсолюно позиционированные элементы вырываются из родительского флекс-контекста, и флексовые свойства на него перестают дейтствовать? А значит flex-basis там нифига не нужен.

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

[Flying]

По поводу flex-basis - это кусок оригинально стиля из codepen'а, я в курсе что он там не нужен в данном случае.

По поводу нескольких блоков - видимо был невнимателен и упустил этот момент, а в оригинальном примере на codepen такой блок всего один. Конечно для нескольких блоков такое решение не подойдёт