Best Practice to position the Components on a flex container


What are the best practices in Ignition Perspective to Position the Components on a Flex Container.
For Example: If I want to Position the buttons at the bottom and then Tables on each other how should i do it?
Or
Tables side by side and then Buttons at the bottom.

Try this:

Create style classes for the margins and padding. I usually created
paddingLR (left-right)
paddingTB (top-bottom)
marginLR (left-right)
marginTB (top-bottom)
and create one for
border with a single-pixel wide solid border.
Try to use theme color variables in the style classes.

Result:

2 Likes

For spaces between flex components, you should just be using the gap CSS prop to do this. This will work when the flex is set to wrap as well.
Eg
style.gap: 5px

1 Like

Thanks, Nick. I am aware that that exists but haven't used it. It cropped up in a post in the last couple of days. I'd better catch up ...