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>;
  );
};
PreviousStyled Bootstrap GridNextAnimated

Last updated