React Flex Layout

React components for creating responsive flex layout inspired by @angular/flex-layout

Install

``
npm i -s react-flexylayout
`

API

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
- element: you can specify the html element of FlexRow by default is div

#### 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
- element: you can specify the html element of FlexItem by default is div

$3

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:


Example

`
import { FlexRow, FlexProvider, FlexItem } from "react-flexlayout";

function App() {
return (



Item 1


Item 2


Item 3



);
}
`

Custom breakpoints

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

Example

`
const config = {
queries: {
xs: "screen and (max-width: 700px)",
sm: "screen and (min-width: 701px) and (max-width: 959px)",
},
behaviour: "replace",
};




``

ToDo

- Add types