# Perspective: How to make component widths equal in Flex container **URL:** \ **Category:** Ignition\ **Created:** [August 20, 2020, 11:04am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938 "2020-08-20T11:04:33Z")\ **Posts on this page:** 8\ **Page:** 1
**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:** [August 20, 2020, 11:04am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938/1 "2020-08-20T11:04:33Z")
I have these two buttons separated by a label acting as a spacer. What settings do I need to put into each’s Position parameters to get them to be the same width and extend to the edges of the flex container? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4d0cd9aaf21ee780d2c48d417c1770f819f79411.png) ---
**Author:** ![michael2](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@michael2](https://forum.inductiveautomation.com/u/michael2)\ **Post date:** [August 20, 2020, 9:41pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938/2 "2020-08-20T21:41:40Z")
Set the basis the same on both components. Make sure grow and shrink are the same. Also, rather than using a spacer, I would set a marginLeft and marginRight property on each button to get the spacing you require. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [August 20, 2020, 9:42pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938/3 "2020-08-20T21:42:19Z")
To make sure that all components have the same width, they should all have the same `grow` value and the same `shrink` value. To enforce this even at smaller sizes, you should also make sure they have the same basis, otherwise they’ll each fill different percentages. You could also do away with the Label spacer and instead use margin values in the style of the components. basically exactly what @michael2 said seconds before I pressed “Reply”. ---
**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:** [August 20, 2020, 9:50pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938/4 "2020-08-20T21:50:17Z")
RE the spacer label, if I used margins instead, I would need to set a margin for both buttons, the left one set the right margin and the right button set the left margin, in order to get them centred to the flex container, is that correct? That’s the only reason I went with the label spacer instead, as I didn’t need to then set two margins. Then if I wanted to change the gap between, I’d have to change both margins and I’m lazy 🙂 ---
**Author:** ![michael2](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@michael2](https://forum.inductiveautomation.com/u/michael2)\ **Post date:** [August 20, 2020, 9:54pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938/5 "2020-08-20T21:54:18Z")
If you create a custom property on the flex container itself that has the margin you want then you can just bind both to parent.custom.myMargin instead. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [August 20, 2020, 9:57pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938/6 "2020-08-20T21:57:23Z")
But you would still need to set up the properties themselves, ie: `RightButton.props.style.marginLeft` and `LeftButton.props.style.marginRight`. I guess I would just have a Perspective Style called HorizontalMargin and assign it to both, but then you wouldn’t have them flush against the sides (which I think would look better anyway. To each his own, I guess. ---
**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:** [August 20, 2020, 10:03pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938/7 "2020-08-20T22:03:45Z")
The flex container is actually in a View that I embed in another View as a “card”, and in the other View is where I apply padding to the whole thing which pulls them away from the sides (as I agree, buttons flush to the sides look bad!). I’m still learning Perspective however and definitely open to suggestions! I’ll swap over to using the margin style instead as you suggest, as that will help with consistency across the project as well 🙂 thanks for the tip ---
**Author:** ![michael2](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@michael2](https://forum.inductiveautomation.com/u/michael2)\ **Post date:** [August 20, 2020, 10:08pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-make-component-widths-equal-in-flex-container/37938/8 "2020-08-20T22:08:36Z")
Alternatively, you could have the flex container use one of the justify properties and have the buttons just be smaller. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/215e4126fc61d7a8a706f0ccf0a20c8b74d8a27e.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/7/972566542de7e3de6bf9f09dd576dc3616aadc13.png)