Choose an adventure:
Hi, username! > My Dashboard > Skins > Create Site Skin
Hi, username! > My Dashboard > Skins > My Work Skins > Create Work Skin
Try to make a skin involving flexbox
Most of the properties are not allowed. They are removed and you get an error message.
On the bright side, the display property already allows the values flex and inline-flex.
The following list of properties and values should be allowed.
align-content property with values flex-start, flex-end, center, space-between, space-around, stretch
align-items property with values stretch, flex-start, flex-end, center, baseline
align-self property with values stretch, flex-start, flex-end, center, baseline (same as align-items values)
flex property with space-separated list of 1 flex-grow value, 1 flex-shrink value, and 1 flex-basis value (only flex-grow is required)
flex-basis property with numerical values with a unit or percentage or auto, fill, max-content, min-content, fit-content, content
flex-direction property with values row, row-reverse, column, column-reverse
flex-flow property with space-separated list of 1 flex-direction value and 1 flex-wrap value, e.g. flex-flow: row wrap
flex-grow property with unit-less whole number (i.e. no negatives) values, e.g. flex-grow: 4
flex-shrink property with unit-less whole number values, e.g. flex-shrink: 1
flex-wrap property with values nowrap, wrap, wrap-reverse
justify-content property with values flex-start, flex-end, center, space-between, space-around, space-evenly
order property with unit-less integer values, e.g. order: -2
Note that there's no need to actually check that the user is putting flex-direction: row instead of flex-direction: 7 or flex-direction: banana, though – we don't do that with most values unless we want to specifically forbid something (e.g. a certain type of positioning in work skins). We're not making sure users are writing working CSS; we're just sanitizing things to make sure they're not pulling a little Bobby Tables on us.
Put the following into a skin and make sure that after saving, the output matches the input and you don't get any error messages. Note that this won't actually do anything useful; it's just to make sure all the values are accepted.
You’ll also need to check the skins help file – the ? by the CSS field – and make sure the new properties are all listed.