# What's the guidlines for when to use a flex and when to use coordinate **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition80\ **Created:** [October 21, 2020, 5:30pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879 "2020-10-21T17:30:03Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![codersmurf](https://avatars.discourse-cdn.com/v4/letter/c/df788c/32.png) [@codersmurf](https://forum.inductiveautomation.com/u/codersmurf)\ **Post date:** [October 21, 2020, 5:30pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/1 "2020-10-21T17:30:03Z")
I’m probably just using them wrong, but when is it appropriate to use flex and coordinate views with an interface that will be used for both mobile and desktop? I have weird issues where the flex views stretch and such with no way to size them in the designer. Is this just how it’s displayed in the designer and will look fine in practice?Thx, Jake ---
**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\ **Post date:** [October 21, 2020, 8:41pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/2 "2020-10-21T20:41:43Z")
Take a peek at the [docs site](https://docs.inductiveautomation.com/) for general info on how to use them: [Flex Container](https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Flex+Container) [Coordinate Container](https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Coordinate+Container) There are videos for each to help you get the layout you’re after. ---
**Author:** ![codersmurf](https://avatars.discourse-cdn.com/v4/letter/c/df788c/32.png) [@codersmurf](https://forum.inductiveautomation.com/u/codersmurf)\ **Post date:** [October 21, 2020, 8:48pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/3 "2020-10-21T20:48:49Z")
I read through those but they seem a little generic, think the last post I had you answered steered me to a usable solution.Thx,jake ---
**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:** [October 22, 2020, 5:56am UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/4 "2020-10-22T05:56:16Z")
The only time I find myself using a Coordinate container is when I need to layer components over one another (I have a Map component with a special UI overlay in a View), but even then I use the percent mode. I use a Breakpoint container if I know I want completely different components available between a mobile user or a desktop user. I use Column Containers If I want to use the EXACT same components between mobile and desktop but I want them in different spots. I use Flex containers for EVERYTHING else, which is actually a majority of the time. I recommend Flex containers (along with nesting coordinate containers or additional Flex containers to manage flow) be used often. I don’t use Tab Containers very often, but use them if… you need tabs. ---
**Author:** ![codersmurf](https://avatars.discourse-cdn.com/v4/letter/c/df788c/32.png) [@codersmurf](https://forum.inductiveautomation.com/u/codersmurf)\ **Post date:** [October 22, 2020, 6:29am UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/5 "2020-10-22T06:29:18Z")
When you say you use column containers, you just line them us side by side and let them wrap? I’ve noticed that there’s a lot of extra space around some of my views and the flex container makes it impossible to remove that blank space, I’m probably use it wrong, but how do I fix that kind of stuff?Thx, Jake ---
**Author:** ![mcarritt1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mcarritt1/32/4262_2.png) [@mcarritt1](https://forum.inductiveautomation.com/u/mcarritt1)\ **Post date:** [October 22, 2020, 8:11am UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/6 "2020-10-22T08:11:13Z")
I also found its best to use flex containers for everything I can basically, only use others if there’s a really good reason to. ---
**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:** [October 22, 2020, 6:51pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/7 "2020-10-22T18:51:37Z")
> [@codersmurf](#): > > When you say you use column containers, you just line them us side by side and let them wrap? No, the Column Container has breakpoints (small, medium, large) where you define the width for each breakpoint. Adding a component to a Column container places that component for all three breakpoints, but you determine where in each breakpoint the component goes, and how wide it should be. This allows me to set up a View which will look vastly different whether used on a phone, tablet, or desktop. To switch between the breakpoints, select the root node of the View (not the named View node, but the `root` node), and adjust the width until it falls within the breakpoints you have defined. ---
**Author:** ![codersmurf](https://avatars.discourse-cdn.com/v4/letter/c/df788c/32.png) [@codersmurf](https://forum.inductiveautomation.com/u/codersmurf)\ **Post date:** [October 22, 2020, 7:03pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/8 "2020-10-22T19:03:59Z")
Where are those breakpoints defined?Thx,jake ---
**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:** [October 22, 2020, 7:14pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/9 "2020-10-22T19:14:06Z")
There are two locations within which you can adjust the breakpoints: 1. Within the Property Editor at `ColumnContainer.props.breakpoints[x].minWidth` ![Screen Shot 2020-10-22 at 12.11.05PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b9915c5902b0f90c9032aaf10badd0a21e67594b.png) 2. If you deep-select the Column Container by double-clicking it (or by right-clicking the Column Container in the Project Browser and selecting "Deep-Select"), then the breakpoint values actually get their own portion of the Property Editor at the top: ![Screen Shot 2020-10-22 at 12.11.15PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/a/5a6e6cc3588c50eeaf01ac3e4af271b976e5f2db.png) ---
**Author:** ![john.glynn](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/john.glynn/32/17348_2.png) [@john.glynn](https://forum.inductiveautomation.com/u/john.glynn)\ **Post date:** [October 26, 2020, 5:55pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/10 "2020-10-26T17:55:53Z")
I’ve recently gotten into using flex containers for basically everything but I want to know if I’m going about it the right way. When I’m using a flex container for more complicated layouts, more than a single row or column, the way I do it consists of several flex containers nested in flex containers nested in etc… e.g. ```auto Flex 0-1 Flex 1-1 Flex 1-1-1 Flex 1-1-2 Flex 1-2 Flex 1-2-1 Flex 1-3 Flex 1-3-1 Flex 1-3-2 ``` This works for me but is there a better way or more elegant way? Thanks ---
**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:** [October 26, 2020, 5:58pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/11 "2020-10-26T17:58:53Z")
This has been my approach, yes. I usually have my root container as a Flex in `column` mode, and then I make “rows” where each row is a new Flex container in `row` mode. There’s not really a more elegant way, although I do highly recommend naming your containers to specify their purpose. This makes it much easier when you’re trying to set up a binding or if you need to drill down for a property reference. ---
**Author:** ![john.glynn](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/john.glynn/32/17348_2.png) [@john.glynn](https://forum.inductiveautomation.com/u/john.glynn)\ **Post date:** [October 26, 2020, 6:00pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/12 "2020-10-26T18:00:54Z")
Yeah I figured that’s how it would be, just wanted to make sure I wasn’t missing anything. Not saying this way isn’t elegant. All glory to the flex container. And yeah I was just using a generic example. Thanks! ---
**Author:** ![bfeas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bfeas/32/3783_2.png) [@bfeas](https://forum.inductiveautomation.com/u/bfeas)\ **Post date:** [April 2, 2025, 1:28pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/13 "2025-04-02T13:28:59Z")
Is it possible to change an existing flex view to a coordinate view? Maintaining another developers views and need to add overlays to the view. I'm not seeing any way to convert. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [April 2, 2025, 1:44pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/14 "2025-04-02T13:44:20Z")
You could create a new coordinate view, copy the root of the old flex view, and past it in your new view. Then you can overlay whatever you want on top of it. You may want to rename that container, and maybe fix a few things like its positioning in the new coordinate container. ---
**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\ **Post date:** [April 2, 2025, 1:49pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/15 "2025-04-02T13:49:25Z")
> [@cmallonee](#): > > This makes it much easier when you’re trying to set up a binding I also name all my components for ease of navigation, but I have learned to bind as much as possible to custom properties of the view itself. This allows for renaming/rearranging components without breaking and having to fix those bindings. It also makes it easier to find and manage all the data housed within the view. As for the topic of this thread, I use Flex containers for everything, except when I need to overlay components on top of one another, for which I use Coordinate containers in percentage mode. ---
**Author:** ![jrusso](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jrusso](https://forum.inductiveautomation.com/u/jrusso)\ **Post date:** [April 2, 2025, 2:10pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/16 "2025-04-02T14:10:25Z")
Coordinate containers are good for P&ID type screens where pipes / diagrams need to maintain relative distance. Everything else I use Flex or a combination of Flex + another type ---
**Author:** ![bfeas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bfeas/32/3783_2.png) [@bfeas](https://forum.inductiveautomation.com/u/bfeas)\ **Post date:** [April 2, 2025, 4:56pm UTC](https://forum.inductiveautomation.com/t/whats-the-guidlines-for-when-to-use-a-flex-and-when-to-use-coordinate/39879/17 "2025-04-02T16:56:24Z")
Thanks Pascal, I did just that.. There are a lot of components in the old view and I was concerned about breaking too many things.. Worked well and was easier than I expected. Much appreciated.