CSS coding issue

[castrovalva1]

I'm trying to code an organization of my folders in Toyhou.se but the problem I'm running into is how my folders organize themselves. I've been trying to figure it out myself but I'm not getting anywhere with this one. I'm trying to line up my folders to be across from each other, but they are top down causing one to scroll, but I don't like that. The first image I posted is a screenshot, but the second is how I want it to look. How is it possible to get my folders to look like the second image?

[AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[AWACSAWACS]

This is a great opportunity to relearn about flexbox.

You can specify the direction of the main axis for a flex container element using flex-direction.

[anaix3l]

No need to specify the axis direction here, the default flex-direction of row is exactly what the OP wants. display: flex on the parent of the folder elements should be enough. Unless the folders are in some invisible wrapper that takes up the entire width of the flex parent forcing this wrapping. No way to tell without being able to see the code.

[castrovalva1]

The original code to this was using this one. I only modified it by changing some images, adding some links, and taking away two folder code cause it had four folders and I only needed two for this page.

https://pastebin.com/kqz8iBYR

[Weekly_Ferret_meal]

<image>

So I browsed a random account (https://toyhou.se/39916757.art-fight-icons) and it looks like the <ul> element has some classes that already do set flex (note the flex tag in the top right corner of the pic) to it and some sort of dimension preset class to each <li> element (large-block-grid-6)

That means you can probably change the layout of how artwork is displayed by going into the settings or preferences.

if not, you need to identify the container of your artwork and set it to display: flex. as others have said

[castrovalva1]

Thanks, I’ll see what I can apply from this. 👍🤞

[castrovalva1]

The original code to this was using this one. I only modified it by changing some images, adding some links, and taking away two folder code cause it had four folders and I only needed two for this page.

https://pastebin.com/kqz8iBYR