Skip to main content

Display

Atomic PropsCSS Properties
blockdisplay: block;
inlinedisplay: inline;
inline-blockdisplay: inline-block;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
griddisplay: grid;
hiddendisplay: none;
display={value}display: {value};

Block

Use block props to create a block-level element.

Result
Loading...
Live Editor

Inline

Use inline props to create an inline element.

Result
Loading...
Live Editor

Inline Block

Use inlineBlock props to create an inline block-level element.

Result
Loading...
Live Editor

Flex

Use flex props to create a block-level flex container.

Result
Loading...
Live Editor

Inline Flex

Use inlineFlex props to create an inline flex container.

Result
Loading...
Live Editor

Grid

Use grid props to create a grid container.

Result
Loading...
Live Editor

Hidden

Use hidden props to set an element to display: none.

Result
Loading...
Live Editor

Display

if the preset atomic props can not be satisfied,you can use display props.

Result
Loading...
Live Editor