import React from 'react' ; import Flex from './Flex' ; import Box from './../Box' ; export default { title : 'Design/Flex' , } ; export const Basic = ( ) => ( < Flex > < Box width = { 1 / 2} bg="pink" p={5} mr={5}> Box one < / Box > < Box width = { 1 / 2} bg="orange" p={5}> Box two < /Box> < /Flex>); export const Wrapped = ( ) => ( < Flex flexWrap = "wrap" > < Box width = { [ 1 , 1 / 2 ] } bg = "pink" p = { 5 } mb = { 2 } > Box one < /Box> < Box width = { [ 1 , 1 / 2 ] } bg = "orange" p = { 5 } > Box two < /Box> < /Flex>); export const Justified = ( ) => ( < Flex justifyContent = "space-around" > < Box width = { 1 / 3} bg="pink" p={5}> Box one < /Box> < Box width = { 1 / 3} bg="orange" p={5}> Box two < / Box > < /Flex>);