Not that difficult. On your page, insert a box, and set it to Flexbox. Give it a maximum width (I used 90%, you could also use a fixed dimension or another unit you like.) Give it left and right margins of auto
.
Double-click inside it and insert two additional boxes inline within it. Set each of them to 50% width. Double-click into the left box, add your text. Double-click into the right box and add your image. Set the image to 100% width, leave everything else alone. Format the left box to have some horizontal padding, so the text doesn’t crash into the image. (You can also do this to the image – it’s your choice.)
Now to get the vertical alignment you want on the text: Select the text box, look down on the inspector to the Flex Item section, set its Align to Center:
That centers it on its “cross axis”, which, counter-intuitively, is up and down.
That’s pretty close, albeit the fonts aren’t the same.
Walter
It’s also worth noting that if you wanted to reverse the image and the description, you could use Row Reverse (Direction in the Flex Container section) to do this. If you have several container boxes like this, with images and description, you might want to alternate between descriptions on the left and descriptions on the right. Just something to play with if you wanted.
Instead of setting 50% width on each flex item, another way to distribute flex items is to choose 1 from the Flex popup. If both items are set to 1, they will be distributed with equal widths (assuming that there aren’t any other constraints, such as minimum/maximum widths). Similarly, if one item is set to 1 while the second is set to 2, the second will be twice the width of the first (in a horizontal layout, in the absence of other constraints).
Flex layout is quite powerful, and there are many ways of using it. In addition to the Flexbox chapter in the user guide, there’s also a tutorial on flex layout (Xway Flexbox Tutorial), and various external resources.
WALTER–
Your expert and detailed advice is much appreciated!
I’ll give it a go, thanks.
GARY
JEREMY–
I’ll investigate Flex box properties more fully, thanks.
G