react-flexible-component
A react component for creating flexible layouts.
- Doesn't use in-line styles for faster rendering.
- Uses familiar css properties.
- Supports a flex-offset to create an offset before and after your component.
Table of contents
Installation
$ npm install react-flexible-component
# or
$ yarn add react-flexible-component
Usage
// libs
import React from "react";
import Flex from "react-flexible-component";
// example
class Example extends React.Component {
render() {
return (
<Flex container flex={8} offsetBefore={1} offsetAfter={1}>
<Flex container>
<Flex container flex={1} flow="column wrap">
<Flex>Menu item 1</Flex>
<Flex>Menu item 2</Flex>
<Flex>Menu item 3</Flex>
<Flex>Menu item 4</Flex>
<Flex>Menu item 5</Flex>
</Flex>
<Flex flex={3}>
<h1>Content, buddy!</h1>
</Flex>
</Flex>
</Flex>
);
}
}
export default Example;Properties
| Property | Type | Description |
|---|---|---|
| alignContent | string | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. |
| alignItems | string | Specifies the default alignment for items inside the flexible container. |
| alignSelf | string | Specifies the alignment for the selected item inside the flexible container. |
| basis | number | Specifies the initial length of a flexible item. |
| children | React node(s) | Child nodes |
| className | String | CSS class name to style the component. |
| container | boolean | Set to true if you want the component to be a flexible container. |
| direction | string | Specifies the direction of the flexible items. |
| flex | number, string or array | Shorthand for the flex-grow, flex-shrink, and the flex-basis properties. |
| flow | string or array | Shorthand property for the flex-direction and the flex-wrap properties. |
| grow | number | Specifies how much the item will grow relative to the rest of the flexible items inside the same container. |
| justifyContent | string | Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). |
| offsetAfter | number | Specifies a flex offset after your children. |
| offsetBefore | number | Specifies a flex offset before your children. |
| shrink | number | Specifies how the item will shrink relative to the rest of the flexible items inside the same container. |
| wrap | string | Specifies whether the flexible items should wrap or not. |
