Reply To: Re-ordering divs and position/layout, is flexbox the answer?

[Paulie_D]

I wouldn’t be in favour of absolute positioning here…it’s just too inflexible.

You describe a few layouts for this .box…certainly most of these can be managed by flexbox but you would need some fairly hard & fast rules about the stacking most about where you want the image to be.

If there is “text block” before the image will this be multiple paragraphs or just one. If the former, you would probably need to wrap those in a separate div so that they can always take first order.

Ditto for any text after the image.

Basically, for flexbox to work effectively I’d envisage a structure something like this.

<div class="box">
  <h1></h1>
  <div class="textblock">
    Your Preceding Text
    In Here
  </div>
  <img src="" alt="" />
  <div class="textblock">
    Your Following Text
    In Here
  </div>
</div>

</div>

Now…this won’t allow the text to wrap around the image at wide screen sizes…is that a definite requirement?

It would be easier to offer advice if we had a glimpse of the wireframes to be honest. Flexbox can do a lot but it’s not the answer to everything.