Supported Style Properties
We try to keep as close to standard web styles as possible - but not every property is implemented. We'll use this page to highlight any differences.
Anything marked in bold may behave differently to how you expect it.
Common Types
Name | Description / Notes | Examples |
---|---|---|
float | A standard float | flex-grow: 10 |
Color | Can have alpha. | color: #fff , color: #ffffffaa , color: rgba( red, 0.5 ) |
Length | A dimension, pixel or relative. | left: 10px , left: 10% |
Supported Properties
Name | Parameters | Examples / Notes |
---|---|---|
align-content | auto / flex-end / flex-start / center / stretch / space-between / space-around / baseline / stretch | |
align-items | as above | |
align-self | as above | |
backdrop-filter | blur(Length) / saturate(Length) / contrast(Length) / brightness(Length) / grayscale(Length) / sepia(Length) | backdrop-filter: blur(10px) saturate(80%) |
background | Fills in the properties below | |
background-color | Color | |
background-image | url(string) / linear-gradient(Color, Color) / radial-gradient(Color, Color) | |
background-position | Length, Length (optional) | background-position: 10px , background-position: 10px 15px |
background-repeat | no-repeat / repeat-x / repeat-y / repeat | |
background-size | Length, Length (optional) | background-size: 10px , background-size: 10px 15px |
border | [ border-width border-style border-color ] | border: 10px solid white |
border-bottom | Same as border |
|
border-bottom-color | Color | |
border-bottom-left-radius | Length | |
border-bottom-right-radius | Length | |
border-bottom-width | Length | |
border-color | Color | |
border-image | ||
border-left | Same as border |
|
border-left-color | Color | |
border-left-width | Length | |
border-radius | Length | border-radius: 10px , border-radius: 10px 0px 10px 10px |
border-right | Same as border |
|
border-right-color | Color | |
border-right-width | Length | |
border-top | Same as border |
|
border-top-color | Color | |
border-top-left-radius | ||
border-top-right-radius | ||
border-top-width | Length | |
border-width | Length | |
bottom | Length | |
box-shadow | Length, Length (optional), Length (blur, optional), Length (spread, optional), Color | |
color | Color / linear-gradient(Color, Color) / radial-gradient(Color, Color) | |
cursor | none / pointer / progress / wait / crosshair / text / move / not-allowed | |
display | flex (default) / none | Everything is flex by default. |
filter | blur(Length) / saturate(Length) / contrast(Length) / brightness(Length) / grayscale(Length) / sepia(Length) / border-wrap(Length, Color) | filter: blur(20px) |
flex-basis | Length | |
flex-direction | column / column-reverse / row-reverse / row | |
flex-grow | float | |
flex-shrink | float | |
flex-wrap | wrap / wrap-reverse / nowrap | |
font-color | Color | |
font-family | string | Specify a single font, based on the filename, see Fonts. |
font-size | Length | |
font-style | normal / italic | |
font-weight | normal / bold / lighter / bolder / int | font-weight: normal , font-weight: 300 |
gap | Length, Length (optional) | shorthand for row-gap and column-gap, specifies the size of gutters |
height | Length | |
image-rendering | auto / anisotropic / bilinear / trilinear / point / pixelated / nearest-neighbour | |
justify-content | center / flex-end / flex-start / space-between / space-around / space-evenly | |
left | Length | |
letter-spacing | Length / normal | |
mask | Shorthand for other mask properties | |
mask-image | url(string) / linear-gradient(Color, Color) / radial-gradient(Color, Color) | |
mask-mode | luminance / alpha | |
mask-repeat | repeat-x / repeat-y / repeat / no-repeat | |
mask-size | Length, Length (optional) | |
mask-position | Length, Length (optional) | |
margin | Fills in the properties below | |
margin-bottom | Length | |
margin-left | Length | |
margin-right | Length | |
margin-top | Length | |
max-height | Length | |
max-width | Length | |
min-height | Length | |
min-width | Length | |
mix-blend-mode | normal / lighten / multiply | |
opacity | Float | |
order | Integer | |
overflow | hidden / scroll / visible | |
padding | Fills in the properties below | |
padding-bottom | Length | |
padding-left | Length | |
padding-right | Length | |
padding-top | Length | |
pointer-events | none / all / auto | |
position | static (default) / relative / absolute | See how it works: https://yogalayout.com/docs/absolute-relative-layout/ |
right | Length | |
text-align | center / left / right | |
text-decoration | Color / Length / LineStyle, Line | Properties can be in any order and you can have multiple lines |
text-decoration-color | Color | Color of the line decoration |
text-decoration-line | underline/line-through/overline | Multiple properties can be set, text-decoration-line: overline underline; |
text-decoration-skip-ink | all/none | Decides whether the line decoration should draw above glyphs or not |
text-decoration-style | solid/double/dotted/dashed/wavy | Line decoration style |
text-decoration-thickness | Length | Thickness of the decoration line |
text-decoration-line-through-offset | Length | How much the line-through decoration is offset |
text-decoration-overline-offset | Length | How much the overline decoration is offset |
text-decoration-underline-offset | Length | How much the underline decoration is offset |
text-shadow | Length, Length (optional), Length (blur, optional), Length (spread, optional), Color | |
text-transform | none / capitalize / lowercase / uppercase | |
text-overflow | ellipsis / clip | |
word-break | normal / break-all | |
line-height | Length | |
top | Length | |
transform | Fills in the properties below | |
transform-origin | x-position / y-position / z-position | |
transform-origin-x | Length | |
transform-origin-y | Length | |
transition | Fills in the properties below | |
transition-delay | float | |
transition-duration | float | |
transition-property | string | |
transition-timing-function | linear / ease / ease-in-out / ease-out / ease-in / bounce-in / bounce-out / bounce-in-out | |
white-space | normal / nowrap | |
width | Length | |
z-index | int |
Useful Resources
- https://yogalayout.com/playground/ - a great website for visualizing how flex layouts work.