Style and Layout 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 |