Обтекание текстом картинки (флекс) возможно?

Question

Обтекание текстом картинки (флекс) возможно?

Olga Ученик (134), на голосовании 1 год назад

Добрый день. Может кто-нибудь подскажет, как можно во флекс-верстке сделать так, чтобы картинку обтекал текст со всех сторон (как при использовании float). Картинка должна быть слева, текст справа и снизу под картинкой?
<style>

.cap {
text-align: center;
text-transform: uppercase;
font: 22px Arial, sans-serif;
padding: 10px;
color: blue;
background-color: skyblue; }

.flex-container {
display: flex;
flex-direction: row;
justify-items: flex-start; }

.ball {
display: flex;
background: url("ball.png") right top repeat-y; }

.menu {
display: flex;
flex-direction: column;
width: 150px;
background-color: #F4E68C;
padding-right: 20px;
padding-bottom: 20px; }

.content {
display: flex;
align-content: flex-start;
flex-direction: column;
margin-left: 2em; }

.photo {
display: flex;
flex-direction: row;
margin-bottom: 0.5cm;
margin-right: 0.5cm; }

.base {
text-align: center;
text-transform: uppercase;
color: blue;
font: 22px Arial, sans-serif;
padding: 20px;
background-color: skyblue; }

</style>
</head>
<body>

<div class='cap'>текст</div>
<div class="flex-container">
<div class='ball'>
<div class='menu'>
<p style='font: bold 16px Calibri, sans-serif; padding: 0.5cm'>текст</p>
<ul style="list-style-type: disc">
<li style='font: 14px Arial, sans-serif'><a href="" target=_blank>text</a></li>
<li style='font: 14px Arial, sans-serif'><a href="" target=_blank>text</a></li>
<li style='font: 14px Arial, sans-serif'><a href="" target=_blank>text</a></li>
</ul>
</div>
<div class='content'>
<div style='text-align: center; font: bold 22px Arial, sans-serif; padding: 15px'>text</div>
<div class='photo'>
<div><img class='photo' src='photo.png' alt='text' title='text'></div>

<div><p style='text-align: justify; font: 14px Arial, sans-serif'>Футбол — text.</p>
<p style='text-align: justify; font: 14px Arial, sans-serif'>text.</p></div>

</div></div>
</div></div>
<div class='base'>text</div>
</div></div>
</body>

Спасибо за помощь!

Answer 1

Нет.
Флекс, это для сетки.
Если речь про обтекание то только float.