# 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

```js
import Box from "@docspace/components/box";
```

```jsx
<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.                                                                                                                                                                                                                                     |