Flex

Implementation of a CSS flex-box container

How to use

Flexboxes are divs that per definition are flexing :)

The following Flex Container using styled-components:

const FlexContainer = styled.div`
    display: flex; 
    flex-direction: "column"; 
    justify-content: "center"; 
    flex-wrap: "wrap"; 
    align-items: "flex-end"; 
    flex: 1; 
`; 

Can be simplified using the Flex component

import {Flex} from 'axelra-styled-bootstrap-grid'; 
 
export const App = () => {
  return (
    <Flex flex={1} column justify="center" align="flex-end" wrap>
      Flexing Content
    </Flex>;
  );
};

Props	Types
flex	number | undefined
column	boolean | undefined
row	boolean | undefined
justify	"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "initial" | "inherit" | undefined
align	"flex-start" | "flex-end" | "center" | "baseline" | "stretch" | "initial" | "inherit" | undefined
wrap	boolean | "wrap" | "wrap-reverse" | "nowrap" | undefined