Learn
Components
API Reference
Onboarding
UI
State
Styling
/
Common-props
Any CSS prop can be used in a component in Reflex. This is a short list of the most commonly used props. To see all CSS props that can be used check out this documentation .
Hyphens in CSS property names may be replaced by underscores to use as valid python identifiers, i.e. the CSS prop z-index would be used as z_index in Reflex.
| Prop | Description | Potential Values |
|---|---|---|
align | In a flex, it controls the alignment of items on the cross axis and in a grid layout, it controls the alignment of items on the block axis within their grid area (equivalent to align_items) | stretchcenterstartendflex-startbaseline |
backdrop_filter | Lets you apply graphical effects such as blurring or color shifting to the area behind an element | url(commonfilters.svg#filter)blur(2px)hue-rotate(120deg)drop-shadow(4px 4px 10px blue) |
background | Sets all background style properties at once, such as color, image, origin and size, or repeat method (equivalent to bg) | greenradial-gradient(crimson, skyblue)no-repeat url('../lizard.png') |
background_color | Sets the background color of an element | brownrgb(255, 255, 128)#7499ee |
background_image | Sets one or more background images on an element | url('../lizard.png')linear-gradient(#e66465, #9198e5) |
border | Sets an element's border, which sets the values of border_width, border_style, and border_color. | soliddashed redthick double #32a1ce4mm ridge rgba(211, 220, 50, .6) |
border_top / border_bottom / border_right / border_left | Sets an element's top / bottom / right / left border. It sets the values of border-(top / bottom / right / left)-width, border-(top / bottom / right / left)-style and border-(top / bottom / right / left)-color | soliddashed redthick double #32a1ce4mm ridge rgba(211, 220, 50, .6) |
border_color | Sets the color of an element's border (each side can be set individually using border_top_color, border_right_color, border_bottom_color, and border_left_color) | redred #32a1cered rgba(170, 50, 220, .6) greenred yellow green transparent |
border_radius | Rounds the corners of an element's outer border edge and you can set a single radius to make circular corners, or two radii to make elliptical corners | 30px25% 10%10% 30% 50% 70%10% / 50% |
border_width | Sets the width of an element's border | thick1em4px 1.25em0 4px 8px 12px |
box_shadow | Adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color | 10px 5px 5px red60px -16px teal12px 12px 2px 1px rgba(0, 0, 255, .2)3px 3px red, -1em 0 .4em olive; |
color | Sets the foreground color value of an element's text | rebeccapurplergb(255, 255, 128)#00a400 |
display | Sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex | blockinlineinline-blockflexinline-flexgridinline-gridflow-root |
flex_grow | Sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size | 123 |
height | Sets an element's height | 150px20em75%auto |
justify | Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container (equivalent to justify_content) | startcenterflex-startspace-betweenspace-aroundspace-evenlystretch |
margin | Sets the margin area (creates extra space around an element) on all four sides of an element | 1em5% 010px 50px 20px10px 50px 20px 0 |
margin_x / margin_y | Sets the margin area (creates extra space around an element) along the x-axis / y-axis and a positive value places it farther from its neighbors, while a negative value places it closer | 1em10%10px |
margin_top / margin_right / margin_bottom / margin_left | Sets the margin area (creates extra space around an element) on the top / right / bottom / left of an element | 1em10%10px |
max_height / min_height | Sets the maximum / minimum height of an element and prevents the used value of the height property from becoming larger / smaller than the value specified for max_height / min_height | 150px7em75% |
max_width / min_width | Sets the maximum / minimum width of an element and prevents the used value of the width property from becoming larger / smaller than the value specified for max_width / min_width | 150px20em75% |
padding | Sets the padding area (creates extra space within an element) on all four sides of an element at once | 1em10px 50px 30px 0010px 50px 20px |
padding_x / padding_y | Creates extra space within an element along the x-axis / y-axis | 1em10%10px |
padding_top / padding_right / padding_bottom / padding_left | Sets the height of the padding area on the top / right / bottom / left of an element | 1em10%20px |
position | Sets how an element is positioned in a document and the top, right, bottom, and left properties determine the final location of positioned elements | staticrelativeabsolutefixedsticky |
text_align | Sets the horizontal alignment of the inline-level content inside a block element or table-cell box | startendcenterjustifyleftright |
text_wrap | Controls how text inside an element is wrapped | wrapnowrapbalancepretty |
top / bottom / right / left | Sets the vertical / horizontal position of a positioned element. It does not effect non-positioned elements. | 04em10%20px |
width | Sets an element's width | 150px20em75%auto |
white_space | Sets how white space inside an element is handled | normalnowrapprebreak-spaces |
word_break | Sets whether line breaks appear wherever the text would otherwise overflow its content box | normalbreak-allkeep-allbreak-word |
z_index | Sets the z-order of a positioned element and its descendants or flex and grid items, and overlapping elements with a larger z-index cover those with a smaller one | auto15200 |
Did you find this useful?
No
Yes
