Display
Atomic Props | CSS Properties |
---|---|
block | display: block; |
inline | display: inline; |
inline-block | display: inline-block; |
flex | display: flex; |
inline-flex | display: inline-flex; |
grid | display: grid; |
hidden | display: none; |
display={value} | display: {value}; |
#
BlockUse block
props to create a block-level element.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
InlineUse inline
props to create an inline element.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
Inline BlockUse inlineBlock
props to create an inline block-level element.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
FlexUse flex
props to create a block-level flex container.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
Inline FlexUse inlineFlex
props to create an inline flex container.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
GridUse grid
props to create a grid container.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
HiddenUse hidden
props to set an element to display: none
.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
Displayif the preset atomic props can not be satisfied,you can use display
props.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO