Flexbox layout with 2 columns with a caveat: neither can be defined as "left" or "right" in the code

Design help General
1

Hi there,

I need help with a particular Flexbox layout.

I’m trying to lay out a 2-column Flexbox with multiple (4-5) rows of items.
Each item is a Lightbox element wrapped in a div. On mobile it becomes one column wide (one video per row).

It works in Safari and on mobile, but in Chrome it doesn’t wrap on a desktop as expected (the video shouldn’t be on the right like it is here, it should float left):

sitebug1
sitebug11002×756 175 KB

I’m trying to fix this layout bug.

One caveat is:
I’m trying to make each Video tile in the layout not have any code in it that distinguishes it as “left” or “right”. I’m trying to make each Lightbox div tile be as “universal” as possible. The reason for this is that I’m going to export the site to a web server and write a PHP script that allows my client to add new Vimeo videos to the layout in future (this saves him money on web hosting, sorry, Webflow). For my PHP script to work, it will duplicate the HTML chunk for the Video Lightbox div, replacing the video elements like the image, title, and link for the new video. The HTML needs to be “universal” (not defined as left/right) so that it can just be added to the top of the list of video divs in the code without having to worry about if it is a “left” or “right” one. That would also mean I would have to change the other Video Lightbox divs on the page from “left” to “right”, or vice versa. Hopefully this makes sense.

Please help!

Here is my site Read-Only:
https://preview.webflow.com/preview/mikes-site-9cf787?utm_medium=preview_link&utm_source=designer&utm_content=mikes-site-9cf787&preview=72f81d4ff862ac883662cdb25c4e1f6a&mode=preview

2

Looks like you solved it…

3

I did, thanks, meant to update this sooner.

I changed the parent div to be the Flexbox, which it wasn’t before, actually. Before, I was floating the child divs to the Left.

Thanks for having a look, though, Noah.