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
Name | Type | Description |
---|---|---|
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 |
flex | string | number | Defines the flex style property. Default value: 0 1 auto |
flexBasis | string | number | Specifies the initial length of a flexible item. Default value: auto |
flexGrow | number | Specifies how much the item will grow relative to the rest of the flexible items inside the same container. Default value: 0 |
flexShrink | number | Specifies 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 |
order | number | Specifies the order of a flexible item relative to the rest of the flexible items inside the same container. Default value: 0 |