Skip to content

Flex-box and spacing system

Layout5.7.2

Box

Component responsible for spacings and sizes 📐

import { Box } from '@semcore/ui/flex-box';
<Box />;
typeBoxProps
StyledProps & {...}
PropertyDescription
inline
boolean

Sets the inline-block property

boxSizing
boolean | "border-box"

CSS box-sizing: border-box property

flex
Property.Flex

CSS flex property

m
number | string

CSS margin property

mt
number | string

CSS margin-top property

mr
number | string

CSS margin-right property

mb
number | string

CSS margin-bottom property

ml
number | string

CSS margin-left property

mx
number | string

CSS margin-left and margin-right property

my
number | string

CSS margin-top and margin-bottom property

p
number | string

CSS padding property

pt
number | string

CSS padding-top property

pr
number | string

CSS padding-right property

pb
number | string

CSS padding-bottom property

pl
number | string

CSS padding-left property

px
number | string

CSS padding-left and padding-right property

py
number | string

CSS padding-top and padding-bottom property

w
number | string

CSS width property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.

wMin
number | string

CSS min-width property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.

wMax
number | string

CSS max-width property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.

h
number | string

CSS height property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.

hMin
number | string

CSS min-height property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.

hMax
number | string

CSS max-height property. If its value is less than 1, is considered as a fraction of 100%. If its value is more than 1, is considered as value in px, if it is a string, is passed as is.

scaleIndent
number = 4

Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).

css
React.CSSProperties
deprecated v4.0.0

Property for specifying css properties in js

position
Property.Position

CSS position property

top
number | string

CSS top property

left
number | string

CSS left property

bottom
number | string

CSS bottom property

right
number | string

CSS right property

zIndex
number
children
React.ReactNode

Flex

The layout building component is a wrapper over CSS-flex. It inherits all properties from Box.

import { Flex } from '@semcore/ui/flex-box';
<Flex />;
typeFlexProps
BoxProps & {...}
PropertyDescription
inline
boolean

It manages the inline-flex property

reverse
boolean

Adds the reverse property to flex-direction

flexWrap
boolean

It manages the flex-wrap property

direction
Property.FlexDirection

It manages the flex-direction property

alignItems
Property.AlignItems

It manages the align-items property

alignContent
Property.AlignContent

It manages the align-content property

justifyContent
Property.JustifyContent

CSS justify-content property

gap
Property.Gap

CSS gap property

rowGap
Property.RowGap

CSS gap property

columnGap
Property.ColumnGap

CSS gap property

scaleIndent
number = 4

Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).