Last updated 4 months ago

Flexbox

flex-direction

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<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
<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
<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
<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
<Flex alignContent="flex-start">... 
<Flex alignContent="flex-end">... 

Props

NameTypeDefaultDescription
flexDirection'row' | 'row-reverse' | 'column' | 'column-reverse'rowDefines the flex-direction style property.
flexWrap'nowrap' | 'wrap' | 'wrap-reverse'wrapDefines the flex-wrap style property.
alignItems'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'stretchDefines the align-items style property for vertical alignment.
justifyContent'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'flex-startDefines the justify-content style property. It is applied for all screen sizes.
alignContent'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around'stretchDefines the align-content style property.
flexstring | number0 1 autoDefines the flex style property.
flexBasisstring | numberautoSpecifies the initial length of a flexible item.
flexGrownumber0Specifies how much the item will grow relative to the rest of the flexible items inside the same container.
flexShrinknumber1Specifies how the item will shrink relative to the rest of the flexible items inside the same container.
alignSelf'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'autoDefines the align-self style property.
ordernumber0Specifies the order of a flexible item relative to the rest of the flexible items inside the same container.