# Perspective: dynamic flex container moving

**URL:** <https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 24, 2023, 1:18pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776 "2023-07-24T13:18:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [July 24, 2023, 1:18pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/1 "2023-07-24T13:18:49Z")

</div>

Sometimes I see a website with flex containers that move flex containers around dynamically.

Width 800 - 1199  
Shows rows of 2 wide containers

Width over 1200  
Shows rows of 3 containers, pulling up one container from the row below and shifting over containers

How do I implement that?

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [July 24, 2023, 1:25pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/2 "2023-07-24T13:25:05Z")

</div>

Oh, I think I thought of one implementation.

I could always have the 3 there, but change visibility based on width.

**For that implementation, how to I detect/reference the width?**

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [July 24, 2023, 1:26pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/3 "2023-07-24T13:26:42Z")

</div>

If it isn't Perspective then it is probably Bootstrap.

The Perspective analog is the Column container.  
Second option is the Breakpoint container.

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [July 24, 2023, 1:27pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/4 "2023-07-24T13:27:30Z")

</div>

Can I do it from flex containers instead?  
I don't want to mix and match containers.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [July 24, 2023, 1:31pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/5 "2023-07-24T13:31:26Z")

</div>

Flex containers will do a lot for you. They were added to HTML5 so that we didn't need Bootstrap. (That's the narrative in my head, but I wasn't paying close attention 😉 )

If you want more control you are going to need to use the browser developer tools to see what is being generated and look up how browsers and flex containers work in the wider world. Perspective is leveraging the functionality in HTML5 and much of that functionality is available but not directly from the designer properties.

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [July 24, 2023, 1:35pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/6 "2023-07-24T13:35:00Z")

</div>

I know I can set a container to grow with a base size. I think you are saying to do it with CSS?

But do you know how I can see what size it is being shown as from within the designer?  
I don't know how to look at the dev tools. Hoping to use regular designer features.  
Maybe I need to use the breakpoint.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 24, 2023, 1:38pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/7 "2023-07-24T13:38:31Z")

</div>

turn on wrap

turn off shrink of the inner components, give a base value of the minimal size, (and give grow 1 if you want)

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [July 24, 2023, 1:39pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/8 "2023-07-24T13:39:57Z")

</div>

Omg that is so simple. Thanks guys.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [July 24, 2023, 1:40pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-flex-container-moving/76776/9 "2023-07-24T13:40:05Z")

</div>

If you want more precise control then the browser developer tools are a must. Use F12 to see them in the browsers that I am familiar with.

If you want to understand flex containers, Paul has linked a good intro and test tool a few times recently.

If you want a quick answer, listen to victor...
