Perspective: dynamic flex container moving

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?

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?

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

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

1 Like

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

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 :wink: )

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.

1 Like

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.

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)

2 Likes

Omg that is so simple. Thanks guys.

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

1 Like