React components for creating responsive flex layout inspired by [@angular/flex-layout](https://github.com/angular/flex-layout)
npm install react-flexylayoutReact components for creating responsive flex layout inspired by @angular/flex-layout
```
npm i -s react-flexylayout
The api provides 3 components: FlexProvider, FlexRow, , FlexItem
FlexProvider is just the simple provider you need to wrap around
FlexRow is the row or container around your items
FlexItem is a single item inside a FlexRow
#### FlexRow properties
- layout: Defines the flow order of child items within a flexbox container
- gap: Defines if child items within a flexbox container should have a gap
- align: Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container div
- element: you can specify the html element of FlexRow by default is
#### FlexItem properties
- size: This markup specifies the resizing of its host element within a flexbox container flow
- align: Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container
- offset: Offset a flexbox item in its parent container flow layout
- order: Defines the order of a flexbox item
- fill: Maximizes width and height of element in a layout container div
- element: you can specify the html element of FlexItem by default is
Out of the box the componet provides fallowing breakpoints
- xs: "screen and (max-width: 599px)"
- sm: "screen and (min-width: 600px) and (max-width: 959px)"
- md: "screen and (min-width: 960px) and (max-width: 1279px)"
- lg: "screen and (min-width: 1280px) and (max-width: 1919px)"
- xl: "screen and (min-width: 1920px) and (max-width: 5000px)"
All props have according responsive version, when responsive version is not provided it uses default one.
The sintaxis for those properties is [prop][breakpoint] like so sizeXs _( notice the uppercase of the breakpoint )_
Example:
`
import { FlexRow, FlexProvider, FlexItem } from "react-flexlayout";
function App() {
return (
Item 1
Item 2
Item 3
);
}
`
You can provide a config object to specify custom sizes and names for your media query breakpoints:
- queries: Object containign media queries
- behaviour: One of "replace" or "overrider", the default is replace.
- override the whole default media queries has been overrided.
- replace Its only update / append new media queries to default ones
`
const config = {
queries: {
xs: "screen and (max-width: 700px)",
sm: "screen and (min-width: 701px) and (max-width: 959px)",
},
behaviour: "replace",
};
``
- Add types