Box

The color property sets the text color of an element.

The height property sets an element's height.

The width property sets an element's width.

The minHeight property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for minHeight.

The minWidth property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for minWidth.

The maxHeight CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for maxHeight.

The maxWidth CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by maxWidth.

The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

The top property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.

The right property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

The bottom property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.

The left property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

The zIndex property sets the "z-order" of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

The transform property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

The flex shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

The flexBasis property sets the initial main size of a flex item.

Defines the main axis, or how the children are placed.

The flexFlow shorthand property specifies the direction of a flex container, as well as its wrapping behavior.

The flexGrow property sets the flex grow factor of a flex item main size.

The flexShrink property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

Allow flex items to flow (wrap) onto multiple lines.

The gridTemplateColumns CSS property defines the line names and track sizing functions of the grid columns.

The gridTemplateRows CSS property defines the line names and track sizing functions of the grid rows.

The gridTemplateAreas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

The gridTemplate CSS property is a shorthand property for defining grid columns, rows, and areas.

The gridAutoColumns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.

The gridAutoRows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.

The gridAutoFlow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

The gridRowStart CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

The gridColumnStart CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area.

The gridRowEnd CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

The gridColumnEnd CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

The gridRow CSS shorthand property specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

The gridColumn CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

The gridArea CSS shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

The margin shorthand property sets the margin area on all four sides of an element at once.

The marginTop property sets the margin area on the top side of an element.

The marginRight property sets the margin area on the right side of an element.

The marginBottom property sets the margin area on the bottom side of an element.

The marginLeft property sets the margin area on the left side of an element.

The marginY shorthand property sets the margin area on the top and bottom of the element.

The marginY shorthand property sets the margin area on the left and right of the element.

The padding shorthand property sets the padding area on all four sides of an element at once.

The paddingTop property sets the height of the padding area on the top of an element.

The paddingRight property sets the width of the padding area on the right of an element.

The paddingBottom property sets the height of the padding area on the bottom of an element.

The paddingLeft property sets the width of the padding area on the left of an element.

The paddingY shorthand property sets the padding area on the top and bottom of the element.

The paddingX shorthand property sets the padding area on the left and right of the element.

The display property specifies the display behaviour (the type of rendering box) of an element.

Declare container type

The backgroundColor property sets the background color of an element.

The border property sets the color of an element's border.

The borderRadius property rounds the corners of an element's outer border edge.

The borderStyle property controls what style the border is displayed in

The borderWidth shorthand property sets the width of an element's border.

The boxShadow property adds shadow effects around an element's frame.

The className prop can be used to add CSS classes to the box.

The cursor property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.

The overflow shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.

The overflowY property sets what shows when content overflows a block-level element's left and right edges.

The overflowY property sets what shows when content overflows a block-level element's top and bottom edges.

Configures the wrapping behaviour for overflowing content

Configures the hyphen behaviour for overflowing content

The userSelect property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.

The alignContent property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

The textAlign property specifies the horizontal alignment of text in an element. It also allows the centering of elements inside a Box while preserving the display: block property

The gap property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

The columnGap property sets the gaps (gutters) between columns.

The rowGap property sets the gaps (gutters) between rows.

The justifyContent property 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.

The order property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.