Custom Sheets : how to make flexbox work?

Hi guys!

I'm trying to build a custom sheet at my GM's demand but I'm struggling with the element's alignment. I'd like to use the flexbox alignment system but I couldnt manage to make it work so far with a simple case. My code is working with regular html/css files but when it comes to Roll20, flexbox functions aren't wroking at all : /

Is there any tricks to make it work ?

Thanks a lot for your help! : )

Flexbox does function in Roll20 character sheets (I know I used it on the Exalted 2e sheet). What specifically isn't working?

Thank you for your answer!

That's good to know! I must have done some mistake then but I can't figure it out.
Well for now I just tried the basic function "justify-content: space-around" to separate 3 columns of text. I placed my texts in 3 separate <div> and all these <div> in a an other <div class="container">. Then I wrote this code in my css file :

.container{
display:flex;
justify-content:space-around;
}

When I open my html file in firefox the flexbox functions works but when I try it on Roll20 it doesn't work at all.

https://gyazo.com/6527e14f50f08517015720754b574b7a... => result on navigator
https://gyazo.com/197b187e197c9795d0d0e999526f2519  => result on Roll20

My guess is your CSS class should be .sheet-container

from the character sheet wiki

CSS/Styling

You can use custom CSS to style the way that your sheet looks to players. You can use nearly any CSS styling that you want, including background images, colors, font sizes, etc. There are just a few caveats to note:

• All of your CSS styles will be restricted to the ".charsheet" parent class. So if you put a style called "input", the system will automatically prefix that with ".charsheet input". This shouldn't affect you in general, but it prevents you from changing any of the Roll20 application CSS outside of the character sheets.
• Note that by default, any HTML classes defined in your HTML layout which don't begin with "attr_", "roll_" or "repeating_" will be prefixed with "sheet-". So for example, if you want to style some of your input tags to be shorter than others and you define the HTML as "<input class='shortfield'>", when processing your layout it will be changed to "<input class='sheet-shortfield'>". So basically, you should probably prefix your classes in your HTML and CSS with "sheet-" to avoid confusion.

Not sure that's all that needs to be fixed, but that would be a quick potential fix. :)

It works! Thanks a lot, you just saved me a loooot of time : )