# Best Practice to position the Components on a flex container

**URL:** <https://forum.inductiveautomation.com/t/best-practice-to-position-the-components-on-a-flex-container/95441>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 8:32pm UTC](https://forum.inductiveautomation.com/t/best-practice-to-position-the-components-on-a-flex-container/95441 "2024-09-02T20:32:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [September 2, 2024, 8:32pm UTC](https://forum.inductiveautomation.com/t/best-practice-to-position-the-components-on-a-flex-container/95441/1 "2024-09-02T20:32:43Z")

</div>

![Issue](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/2/22bcaa74596b9090e93da08a2dc973b24739282c.png)  
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.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 2, 2024, 9:07pm UTC](https://forum.inductiveautomation.com/t/best-practice-to-position-the-components-on-a-flex-container/95441/2 "2024-09-02T21:07:54Z")

</div>

Try this:

 ![Flex layout](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/6/d657b9086318431f0d9a0a831a4131ebaa531d07.png)

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:

 ![Flex layout view](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a55245dd8260e6738f082a7093d1716af9f6d752.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 2, 2024, 10:21pm UTC](https://forum.inductiveautomation.com/t/best-practice-to-position-the-components-on-a-flex-container/95441/3 "2024-09-02T22:21:08Z")

</div>

> [@Transistor](#):
>
> Create style classes for the margins and padding. I usually created  
> `paddingLR` (left-right)  
> `paddingTB` (top-bottom)  
> `marginLR` (left-right)  
> `marginTB` (top-bottom)

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`

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 2, 2024, 10:23pm UTC](https://forum.inductiveautomation.com/t/best-practice-to-position-the-components-on-a-flex-container/95441/4 "2024-09-02T22:23:31Z")

</div>

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 ...