Wrapping text around image using Flex-box?

HTML & CSS
1

In the good ole’ days (like yesterday) I could just float an image left, add some margin and let the text flow around after the image height had been reached.

I’m now trying flex-box and have not figured a way to get the same effect. What am I missing?

2

I don’t believe you can.

What’s wrong with doing this with floats, if you acknowledge you can do it that way?

It’s not like floats / other layout techniques don’t have their uses anymore now that flex is here.

3

Found the problem. The image was wrapped in a <figure> and would not work properly.

After removing the figure it works fine. Wonder why they didn’t seem to allow for the newer element?

4

CSS and html for a start :smile:

It helps if we have some code to see what you are attempting but flexbox is not a substitute for float behaviour and flex-items ignore the float property.

If you want something floated inside a flex-item (direct children of a flex box) then you will need an inner element that is floated and the text will wrap around that.

Something like:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p{margin:0 0 1em}
.wrap {display:flex}
.box {
	flex:1;
	border:1px solid #000;
	padding:10px;
}
.box2{flex:2 0 0}
.box img{float:left;margin:0 10px 10px 0;max-width:60%;height:auto;}

</style>
</head>

<body>
<div class="wrap">
		<div class="box">flex item</div>
		<div class="box box2"><img src="http://placehold.it/350x150">
				<p>Lorem ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem  ipsum dolor sit amet lorem </p>
		</div>
		<div class="box">flex item</div>
</div>
</body>
</html>
5

What I ultimately found was that I can float the image in a div, or a picture element, but not in the figure element (which also means no figcaption).

So, to get what I want now for responsive image with a caption I need to wrap whole thing in a div and picture element with the caption centered separately under the image instead of just figure and figcaption…

Wonder why floating figure doesn’t work?

6

That’s odd. It should not matter weather it is in a div or a figure. Can we see some code? It may be how the elements are nested. If the figure is a direct child of the flex container, it will not work, flex will override any float, treating its children as blocks. The floated figure must be a child of a child of the flex container. Eg.

<div class="flex">
  <section>
    <figure class="float">
      <img>
      <figcaption>Some photo</figcaption>
    </figure>
    <p>The section is a direct child of the flex container. The figure is a child of the section.</p>
  </section>
  <section>
    <p>This section is another direct child of the flex container</p>
  </section>
</div>
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.