Flex Box Tips

Xway
1

I’ve been using Flex Box quite a lot in Xray to align boxes and images across a page which then stack on a small device here is what I’ve found works well:

  1. Create a box that will contain all the items you want to appear horizontally across a page
  2. Within that box create a box for each of the items that will go across the page
  3. For each of the nested boxes in the Dimensions inspector set the width to be a percentage based on the number of items minus a bit for padding/margins i.e. for 2 boxes set each at 45%, for 3 boxes set at 30%, then in the max/min dimensions change the minimum width from 100px to 300px (a little smaller than the smallest smartphone)
  4. If you are going have one or more of the items be an image it must go inside of one of the boxes, in max/min dimensions, set the max-width of the image at 100% so it fills the box
  5. Now go back to the first box you created (that has all the other boxes within it) and in Extended Properties (the one under the Text section) enter the following:

NAME VALUE
display flex
flex-flow row wrap
justify-content space-evenly

You should see your boxes lined up and evenly space across the page that will stack when the screen gets small enough.
There are other settings you can apply for different effects, check out this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope this is helpful for some!
Seth

1 Like
2

I just got around to trying this and it works GREAT! Thank you, I think just might allow me to start using Xway for my actual website now as it solves a problem I was having trying to get my inventory laid out properly.

3

Thank you for this Seth - works really well and simple to implement.