Flexbox

flex-direction

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Copy
Copied
<Flex flexDirection="row">...
<Flex flexDirection="row-reverse">...

flex-wrap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Copy
Copied
<Flex flexWrap="nowrap">...
<Flex flexWrap="wrap">...

justify-content

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Copy
Copied
<Flex justifyContent="flex-start">...
<Flex justifyContent="center">...
<Flex justifyContent="flex-end">...

align-items

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Copy
Copied
<Flex alignItems="flex-start">...
<Flex alignItems="center">...
<Flex alignItems="flex-end">...

align-content

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Copy
Copied
<Flex alignContent="flex-start">...
<Flex alignContent="flex-end">...

Props

NameTypeDescription
flexDirection'row' | 'row-reverse' | 'column' | 'column-reverse'Defines the flex-direction style property. Default value: row
flexWrap'nowrap' | 'wrap' | 'wrap-reverse'Defines the flex-wrap style property. Default value: wrap
alignItems'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'Defines the align-items style property for vertical alignment. Default value: stretch
justifyContent'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'Defines the justify-content style property. It is applied for all screen sizes. Default value: flex-start
alignContent'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around'Defines the align-content style property. Default value: stretch
flexstring | numberDefines the flex style property. Default value: 0 1 auto
flexBasisstring | numberSpecifies the initial length of a flexible item. Default value: auto
flexGrownumberSpecifies how much the item will grow relative to the rest of the flexible items inside the same container. Default value: 0
flexShrinknumberSpecifies how the item will shrink relative to the rest of the flexible items inside the same container. Default value: 1
alignSelf'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'Defines the align-self style property. Default value: auto
ordernumberSpecifies the order of a flexible item relative to the rest of the flexible items inside the same container. Default value: 0