Hello,
My page is a flex container, and I want to place 3 boxes in the middle of the page as shown below. If I use margins it works, but if I zoom in, the page looks like crap. I want the "margin" to reduce as I zoom in. How can I do that?
Thank you 
How are you zooming in? With the browser's page zoom function (Ctrl-+)? Or do you mean something else?
You can define the margin as a percent% value. Also, you can define the gap property to stabish the gap distance between components.
I would be setting the flex container's justify to be centred. Don't use margins, use the style.gap css prop to set spacing between components
Although I'm not sure how the justify works with zoom.. If it doesn't work, try setting the margin or padding of the flex container to 0 auto. This will set the top/bottom to 0 and the left/right to resize equally based on the size of the components within the flex
1 Like