Flexbox wrapping capabilities

Xway
1

I have a flexbox containing two boxes, one with an image, one with text that ideally will display to the side of the image (there will be several sets of image/text boxes running down the page. I’ve studied the tutorial and read through earlier posts, but I’ve yet to discover if text can genuinely be wrapped, in the DTP meaning of the term, so the lines run down the side of the image and then underneath it. Flexbox wrapping just places the text underneath the image leaving wasted white space at the side.
Thanks
Geoff

2

Hi Geoff,

If you want to wrap text around an image, you can use float to do this. Xway doesn’t support this directly (yet), but you can add it as an extended property in the Extended Properties section of the Box Inspector. To float an image left, add float as the Name and left as the Value.

3

Hi Jeremy.
I did see this suggested in the forum, but couldn’t get it to work.
Do I still use a flexbox, or a normal container? I’ve tried both without success, so perhaps I’ve got something else wrong in the settings.

geoff

4

This is my favorite summing-up of the Flexbox layout model: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

If you’ve set a parent container to be display: flex, then any children you put in it will ignore float entirely: CSS Flexible Box Layout Module Level 1

The parent box (once it is set to “flex”) will have the “row” layout behavior, so if you want to make the text appear at the left and the image at the right, you want to use the align-self property on that image to push it over to the right. You also need the justify-content property on the parent, otherwise the children (text is one of the children) will be just stay aligned left and the same width as their content by default.

5

Thanks, cracked it! I thought I’d unticked the flex container box, but I hadn’t.

Thanks
Geoff

6

Yes, you don’t need flexbox to wrap text around an image. Also, Xway doesn’t allow you to have text directly within a flex container. But you can put text in a (flex-item) box inside a flex container.

The CSS Tricks complete guide to flexbox that Walter recommended is a good introduction, and there’s also the Xway Flexbox Tutorial (which recommends that guide for further reading).

Flexbox is useful for adaptive layouts (the tutorial deals with this), but it’s not a subsitute for float - or vice versa!

7

I thought I had been awfully clever, replying by e-mail with an embedded bit of Markdown-formatted code example to illustrate my point, but the mail-to-forum bit stripped it out somehow.

+------------------------------------+
|  display: flex;       +-----------+|
|  justify-content:     | align-    ||
|    space-between;     | self:     ||
|                       | flex-end; ||
|                       +-----------+|
|                                    |
+------------------------------------+

Ah, modern forums and e-mail integration…

Walter

8

I’m afraid my eyes glaze over at the sight of coding. That’s why I loved Freeway!
Geoff