> For the complete documentation index, see [llms.txt](https://lucas-pelloni.gitbook.io/styled-bootstrap-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lucas-pelloni.gitbook.io/styled-bootstrap-grid/flex.md).

# Flex

## How to use

Flexboxes are divs that per definition are flexing :)

The following Flex Container using styled-components:

```jsx
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

```jsx
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`                                                       |