12.9.1
This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
orientation | Type: String | Values: row | column import React from 'react' import { Flex, FlexItem, Title } from '../../' const FlexDefault = (props) => { return ( <> <Title size={4} text="Row" {...props} /> <br /> <div className="flex-doc-example"> <Flex orientation="row" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <Title size={4} text="Column" {...props} /> <br /> <div className="flex-doc-example"> <Flex align="start" orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexDefault
inline | Type: Boolean
By default this prop is false which sets the flex container to take up the full width of its parent container. When the prop is set to true the flex container sets its width to be the same size as the containing items.
import React from 'react' import { Flex, FlexItem, Title } from '../..' const FlexInline = (props) => { return ( <> <div className="flex-doc-example"> <Title size={4} text="Row" {...props} /> <br /> <Flex className="bg_light" inline {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> <br /> <Title size={4} text="Column" {...props} /> <br /> <Flex className="bg_light" inline orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexInline
reverse | Type: Boolean
When set to true this prop will reverse the order of items in the flex container.
import React from 'react' import { Flex, FlexItem, Title } from '../..' const FlexReverse = (props) => { return ( <> <div className="flex-doc-example"> <Title size={4} text="Row" {...props} /> <br /> <Flex className="bg_light" justify="start" orientation="row" reverse {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> <br /> <Title size={4} text="Column" {...props} /> <br /> <Flex align="start" className="bg_light" orientation="column" reverse {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexReverse
wrap | Type: Boolean
When set to true this prop will move the next item in flex container to a new line if there is no more room.
import React from 'react' import { Body, Flex, FlexItem, Title } from '../..' const FlexWrap = (props) => { return ( <> <div className="flex-doc-example"> <Body text="Resize your browser" {...props} /> <Title size={4} text="Wrap" {...props} /> <br /> <Flex className="bg_light" wrap {...props} > <FlexItem fixedSize="300px"> {'1'} </FlexItem> <FlexItem fixedSize="300px"> {'2'} </FlexItem> <FlexItem fixedSize="300px"> {'3'} </FlexItem> <FlexItem fixedSize="300px"> {'4'} </FlexItem> <FlexItem fixedSize="300px"> {'5'} </FlexItem> <FlexItem fixedSize="300px"> {'6'} </FlexItem> <FlexItem fixedSize="300px"> {'7'} </FlexItem> <FlexItem fixedSize="300px"> {'8'} </FlexItem> <FlexItem fixedSize="300px"> {'9'} </FlexItem> <FlexItem fixedSize="300px"> {'10'} </FlexItem> </Flex> <br /> <Title size={4} text="No Wrap" {...props} /> <br /> <Flex className="bg_light"> <FlexItem fixedSize="300px"> {'1'} </FlexItem> <FlexItem fixedSize="300px"> {'2'} </FlexItem> <FlexItem fixedSize="300px"> {'3'} </FlexItem> <FlexItem fixedSize="300px"> {'4'} </FlexItem> <FlexItem fixedSize="300px"> {'5'} </FlexItem> <FlexItem fixedSize="300px"> {'6'} </FlexItem> <FlexItem fixedSize="300px"> {'7'} </FlexItem> <FlexItem fixedSize="300px"> {'8'} </FlexItem> <FlexItem fixedSize="300px"> {'9'} </FlexItem> <FlexItem fixedSize="300px"> {'10'} </FlexItem> </Flex> </div> </> ) } export default FlexWrap
justify | Type: String | Values: none | around | evenly | between
import React from 'react' import { Flex, FlexItem, Title } from '../..' const FlexSpacing = (props) => { return ( <> <div className="flex-doc-example"> <Title size={4} text="None" {...props} /> <br /> <Flex className="bg_light" justify="none" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> <br /> <Title size={4} text="Around" {...props} /> <br /> <Flex className="bg_light" justify="around" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> <br /> <Title size={4} text="Between" {...props} /> <br /> <Flex className="bg_light" justify="between" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> <br /> <Title size={4} text="Evenly" {...props} /> <br /> <Flex className="bg_light" justify="evenly" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexSpacing
justify | Type: String | Values: start | center | end | | none
import React from 'react' import { Flex, FlexItem, Title } from '../..' const FlexJustify = (props) => { return ( <> <Title size={4} text="Row" {...props} /> <br /> <div className="flex-doc-example"> <Flex justify="start" orientation="row" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example"> <Flex justify="center" orientation="row" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example"> <Flex justify="end" orientation="row" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <Title size={4} text="Column" {...props} /> <br /> <div className="flex-doc-example tall"> <Flex align="start" className="bg_light tall" justify="start" orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example tall"> <Flex align="start" className="bg_light tall" justify="center" orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example tall"> <Flex align="start" className="bg_light tall" justify="end" orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexJustify
align | Type: String | Values: start | center | end | stretch | baseline | none
import React from 'react' import { Flex, FlexItem, Title } from '../..' const FlexAlign = (props) => { return ( <> <Title size={4} text="row" {...props} /> <br /> <div className="flex-doc-example "> <Flex align="start" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem padding="xl"> {'3'} </FlexItem> <FlexItem padding="md"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex align="center" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem padding="xl"> {'3'} </FlexItem> <FlexItem padding="md"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex align="end" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem padding="xl"> {'3'} </FlexItem> <FlexItem padding="md"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex align="stretch" orientation="row" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem padding="xl"> {'3'} </FlexItem> <FlexItem padding="md"> {'4'} </FlexItem> </Flex> </div> <br /> <Title size={4} text="Column" {...props} /> <br /> <div className="flex-doc-example "> <Flex align="start" orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex align="center" orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex align="end" orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex align="stretch" orientation="column" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexAlign
gap | row_gap | rowGap | column_gap | columnGap | Type: String | Values: xs | sm | md | lg | xl | none
Setting the gap prop sets the rowgap || rowGap and the columngap || columnGap props to the same size and creates equal space within a flex container.
Setting the row_gap || rowGap prop creates space between rows in a flex container.
Setting the column_gap || columnGap prop creates space between columns in a flex container.
import React from 'react' import { Flex, FlexItem } from '../../' const FlexGap = (props) => { const count = () => { const array = [] for (let i = 0; i < 40; i++) { array.push(i) } return array } return ( <> <div className="flex-doc-example"> <Flex gap="xs" wrap {...props} > {count().map((v, key) => ( <FlexItem key={key}> {v} </FlexItem> ))} </Flex> </div> <br /> <div className="flex-doc-example"> <Flex columnGap="lg" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example"> <Flex orientation="column" rowGap="xl" {...props} > <FlexItem> {'1'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexGap
display_flex | Type: Booleanflex | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12fixed_size | Type: String | Values: Any CSS px or % valuegrow | Type: Booleanshrink | Type: Booleanorder | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
Flex is a short hand to set the flex item to take up (x) amount of available space
Setting Flex to 1 is equal to setting the grow & shrink prop to true
Setting Flex to 0 is equal to setting the grow & shrink prop to false
If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
display_flex will either be true or false. If true, then the class will be applied to the kit
import React from 'react' import { Flex, FlexItem, Title } from '../..' const FlexItemExample = (props) => { return ( <> <Title size={4} text="Display Flex" /> <br /> <div className="flex-doc-example"> <FlexItem displayFlex gap="xs" {...props} > <FlexItem> {'We'} </FlexItem> <FlexItem> {'Are'} </FlexItem> <FlexItem> {'Being'} </FlexItem> <FlexItem> {'Flexed'} </FlexItem> </FlexItem> </div> <br /> <Title size={4} text="Grow" /> <br /> <div className="flex-doc-example"> <Flex gap="xs" {...props} > <FlexItem grow> {'I\'m growing'} </FlexItem> <FlexItem> {'2'} </FlexItem> <FlexItem> {'3'} </FlexItem> <FlexItem> {'4'} </FlexItem> </Flex> </div> <br /> <Title size={4} text="Shrink" /> <br /> <div className="flex-doc-example"> <Flex gap="xs" {...props} > <FlexItem> {'I\'m shrinking'} </FlexItem> <FlexItem flex={1}> {'2'} </FlexItem> <FlexItem flex={1}> {'3'} </FlexItem> <FlexItem flex={1}> {'4'} </FlexItem> </Flex> </div> <br /> <Title size={4} text="Fixed Size" /> <br /> <div className="flex-doc-example"> <Flex gap="xs" {...props} > <FlexItem fixedSize="250px"> {'I\'m 250px'} </FlexItem> <FlexItem flex={1}> {'2'} </FlexItem> <FlexItem flex={1}> {'3'} </FlexItem> <FlexItem flex={1}> {'4'} </FlexItem> </Flex> </div> <br /> <Title size={4} text="Flex" /> <br /> <div className="flex-doc-example"> <Flex gap="xs" {...props} > <FlexItem flex={1}> {'1'} </FlexItem> <FlexItem flex={3}> {'2'} </FlexItem> <FlexItem flex={1}> {'3'} </FlexItem> <FlexItem flex={2}> {'4'} </FlexItem> </Flex> </div> <br /> <Title size={4} text="Order" /> <br /> <div className="flex-doc-example"> <Flex gap="xs" {...props} > <FlexItem order={4}> {'1'} </FlexItem> <FlexItem order={2}> {'2'} </FlexItem> <FlexItem order={1}> {'3'} </FlexItem> <FlexItem order={3}> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexItemExample
align_self | Type: String | Values: start | end | center | stretch
Align-self aligns the Flex Item on the cross axis. This prop may also be applied to the Flex kit and will act the same way.
import React from 'react' import { Flex, FlexItem, Title } from '../..' const FlexItemAlignSelf = (props) => { return ( <> <Title size={4} text="Row" {...props} /> <br /> <div className="flex-doc-example "> <Flex {...props} > <FlexItem alignSelf="start"> {'1'} </FlexItem> <FlexItem padding="md"> {'2'} </FlexItem> <FlexItem padding="md"> {'3'} </FlexItem> <FlexItem padding="md"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex {...props} > <FlexItem alignSelf="end"> {'1'} </FlexItem> <FlexItem padding="md"> {'2'} </FlexItem> <FlexItem padding="md"> {'3'} </FlexItem> <FlexItem padding="md"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex {...props} > <FlexItem alignSelf="center"> {'1'} </FlexItem> <FlexItem padding="md"> {'2'} </FlexItem> <FlexItem padding="md"> {'3'} </FlexItem> <FlexItem padding="md"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex {...props} > <FlexItem alignSelf="stretch"> {'1'} </FlexItem> <FlexItem padding="md"> {'2'} </FlexItem> <FlexItem padding="md"> {'3'} </FlexItem> <FlexItem padding="md"> {'4'} </FlexItem> </Flex> </div> <br /> <br /> <Title size={4} text="Column" {...props} /> <br /> <div className="flex-doc-example "> <Flex orientation="column" {...props} > <FlexItem alignSelf="start" padding="sm" > {'1'} </FlexItem> <FlexItem padding="sm"> {'2'} </FlexItem> <FlexItem padding="sm"> {'3'} </FlexItem> <FlexItem padding="sm"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex orientation="column" {...props} > <FlexItem alignSelf="end" padding="sm" > {'1'} </FlexItem> <FlexItem padding="sm"> {'2'} </FlexItem> <FlexItem padding="sm"> {'3'} </FlexItem> <FlexItem padding="sm"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex orientation="column" {...props} > <FlexItem alignSelf="center" padding="sm" > {'1'} </FlexItem> <FlexItem padding="sm"> {'2'} </FlexItem> <FlexItem padding="sm"> {'3'} </FlexItem> <FlexItem padding="sm"> {'4'} </FlexItem> </Flex> </div> <br /> <div className="flex-doc-example "> <Flex orientation="column" {...props} > <FlexItem alignSelf="stretch" padding="sm" > {'1'} </FlexItem> <FlexItem padding="sm"> {'2'} </FlexItem> <FlexItem padding="sm"> {'3'} </FlexItem> <FlexItem padding="sm"> {'4'} </FlexItem> </Flex> </div> </> ) } export default FlexItemAlignSelf