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 |