Как сделать так, чтобы текст обтекал flex элемент и занимал пустое пространство под ним?

Question

[Norum]

как сделать так, чтобы текст обтекал блок .spec и чтобы текст занимал пустое пространство под ним?
https://jsfiddle.net/k2r6bd37/

Comments

[Антон Литвиненко]

при вашей разметке и стилях никак. Более того, насколько я помню, во флекс контейнере свойство float не работает, и даже если вы по правильному попытаетесь сделать обтекание текстом с помощью флоат, убрав лишний контейнер, то тоже ничего не выйдет

[Norum]

Антон Литвиненко, может тогда при отмене флекса в адаптивной ширине получится это сделать или отменить влияние флекса именно на блок , который будет обтекать текст?

[Антон Литвиненко]

Norum, я бы сделал по классике, это как раз тот случай, для которого придумали флоат

[Антон Литвиненко]

Щас может гуру подтянутся и лучше что-то предложат.

[Арсений Матыцин]

Антон Литвиненко, я предлагаю не использовать justify в text-align. Это противоестественно.

[Антон Литвиненко]

Арсений Матыцин, ну че, когда-то было модно. Я уже и забыл про это свойство)

Answer 1

[Арсений Матыцин]

Я бы завернул все флоатом на медиазапросах. Можно и в сторону shape-outside посмотреть, в том числе на гридах, но, хз.

Comments

[Norum]

float не будет работать во флексе. А на какой элемент применить shape-outside?

[Арсений Матыцин]

Norum, от флексов надо отказаться, это само-собой. Флексы не панацея.

Shape-outside применяется к объекту, который будет обтекаться.

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