LAUNCHED: Wrap elements in Auto Layout to multiple lines

Forum|Forum|5 years ago
January 25, 2021
254 replies
119958 views

It would be really great if there was an option in an auto layout frame where the frame would wrap the objects to the next line. Like this. Objects would respect the padding set in the Auto layout.

Loom

Share an idea

Show previous replies

Ryder_Booth2

+1 make the auto layout that much more magical… please!

Mantas_Milkintas

Yes please! +1

Jenni_Merrifield

New Member

omg, yes, please - if I could vote on an idea more than once I would seriously consider adding half my remaining votes to it.

I don’t actually think that the full capabilities of flex box would require too much complexity if some of the options are in the main UI and others are in the advanced menu where you can currently choose between packed/distributed, include/exclude borders, first/last on top stacking order and text baseline.

I’d put the following directly on the properties panel:

horizontal and vertical z-wrap options (as others have described above)
a field for the number of columns/rows along the horizontal/vertical

When the the horizontal/vertical resize of the container is “fixed”, contained items - which can have any resize option - are automatically wrapped at the specified number of columns/rows,

When the horizontal/vertical resize is set to “fill” and the advanced “Spacing mode” setting is “Packed” the same number is used and all contained items are set to “fill”. If the resize is still fill and spacing mode is changed to “Space between” then column/row count switches to “Auto” and the wrap is based on the width/height of the container frame and the width/height of the contained items. In this latter case, items set to “fill” will always fill up what remains of the width/height of the current row/column, forcing the next item into the following row/column. This does mean that if all items are set to “fill” the result devolves to a single column/row but that’s okay because, if the user wants them to be in multiple columns/rows they just have to switch back to the “Packed” spacing mode.

“justify-content” and “align-content” values are handled by the existing alignment square.

“row-gap” and “column-gap” are handled by showing both the horizontal and vertical “spacing between items” elements

“align-items” is on the advanced panel and only enabled when the horizontal or vertical z-wrap is selected. For the horizontal z-wrap, it uses the same three icons as text does for vertical alignment. For the vertical z-wrap, it uses the same icons as text does for horizontal alignment.