DocSpace-client/packages/shared/components/box

Box

A container that lays out its contents in one direction. Box provides general CSS capabilities like flexbox layout, paddings, background color, border, and animation.

Usage

import { Box } from "@docspace/shared/components";

<Box />

Properties

Props	Type	Required	Values	Default	Description
alignContent	string	-	-	-	sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis
alignItems	string	-	-	-	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.
alignSelf	string	-	-	-	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.
backgroundProp	string	-	-	-	sets all background style properties at once, such as color, image, origin and size, or repeat method.
borderProp	string,object	-	-	-	sets an element's border. It sets the values of border-width, border-style, and border-color.
displayProp	string	-	-	-	sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
flexBasis	string	-	-	-	sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
flexDirection	string	-	-	-	sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
flexProp	string	-	-	-	sets how a flex item will grow or shrink to fit the space available in its flex container. It is a shorthand for flex-grow, flex-shrink, and flex-basis.
flexWrap	string	-	-	-	sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
gridArea	string	-	-	-	is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
heightProp	string	-	-	-	defines the height of the border of the element area.
justifyContent	string	-	-	-	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.
justifyItems	string	-	-	-	defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
justifySelf	string	-	-	-	sets the way a box is justified inside its alignment container along the appropriate axis.
marginProp	string	-	-	-	sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
overflowProp	string	-	-	-	sets what to do when an element's content is too big to fit in its block formatting context.
paddingProp	string	-	-	-	sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left
textAlign	string	-	-	-	sets the horizontal alignment of a block element or table-cell box. This means it works like vertical-align but in the horizontal direction
widthProp	string	-	-	-	defines the width of the border of the element area.