Code Help Thread

Flex makes the things go boi-oi-oi-oing on the screen! They smoosh to fit.


So!

start with:

attr="style", "display:flex;"

You can also use "display:inline-flex" and "display:block-flex" They do some pretty neat weird stuff? Play with them!

next:
flex-direction

row or column. Basically, are you going over or are you going down?

next, wrapping:
flex-wrap: no-wrap does nothing
flex-wrap:wrap if it gets too smooshy, moves the second part below the first part
flex-wrap:wrap-reverse if it gets too smooshy, put it in a column in reverse order whooooaaaa cool

next, justify-content
center, flex-start, flex-end, space-around, or space-between! None of them work so it doesn't matter! Pick one and yeet it out there.

next, gap
if you want a gap between your elements, set it using
gap:45px or something


Cool, that probably sets it up. New div.

attr="style",flex-grow:1

or 2 or 3. This determines how fast each part grows with respect to the other parts.

then I like to do a
min-width:42px means it gets no smaller than this before it wraps, setting a min-width is what makes your wrap work otherwise it just smooshies

you can also do a straight up
width: in pixels or percents - I like to use a percentage here and pixels for the min-width, but you do you

you can also set a
max-width:69px so it doesn't get bigger than that

Close ya div.

Next element,
attr="style",flex-grow:1

this again with all the stuff thrown in.

You can stick divs in there, too.

Edit: Flex does not play well with code or noparse tags.

---

---

[div style="background-color:#000000;"][attr="style","display: flex; flex-direction: row; flex-wrap: wrap;padding:0px;justify-content:flex-end;gap:20px;background-color:#000000"]
[div][attr="style","flex-grow:2;padding:5px;margin:0px;border-radius:2px;background-color:#FF0000;color:#e0f2e8;min-width:100px;"][font size="3"]
Don't
[/font][/div]
[div][attr="style","flex-grow:1;padding:5px;margin:0px;border-radius:2px;background-color:#0000FF;color:#e0f2e8;min-width:100px;"][font size="3"]You
[/font][/div]
[div][attr="style","flex-grow:2;padding:5px;margin:0px;border-radius:2px;background-color:#FF0000;color:#e0f2e8;min-width:100px;"][font size="3"]
Feel
[/font][/div]
[div][attr="style","flex-grow:1;padding:5px;margin:0px;border-radius:2px;background-color:#0000FF;color:#e0f2e8;min-width:100px;"][font size="3"]Fancy?
[/font][/div]
[/div]

That is super cool