Getting Started

Installation

Inside your React project directory, run the following:

yarn add react-flex-ready

Or with npm:

npm install react-flex-ready

Features

  • TypeScript support
  • Flexbox ready
  • Easy to use
  • Easy to customize

Simple example


6 Columns

6 Columns

import { Flex, Item } from "react-flex-ready";
const YourApp = () => (
  <Flex>
    <Item col={6} colTablet={6} colMobile={12} gap={1} marginBottom={30} stretch>
      <div
        style={{
          textAlign: "center",
          width: "100%",
          border: "1px solid #eee",
          background: "#eee"
        }}
      >
        <p>6 Columns</p>
      </div>
    </Item>
    <Item col={6} colTablet={6} colMobile={12} gap={1} marginBottom={30} stretch>
      <div
        style={{
          textAlign: "center",
          width: "100%",
          border: "1px solid #eee",
          background: "#eee"
        }}
      >
        <p>6 Columns</p>
      </div>
    </Item>
  </Flex>
);

Advanced example


1

1

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

2

3

3

3

3

4

4

4

5

7

6

6

4

8

3

9

2

10

1

11

12

4

4

4

4

4

import myList from "some-list";
import { Flex, Item } from "react-flex-ready";
const YourApp = () => (
  <Flex
    col={4}
    colTablet={6}
    colMobile={12}
    gap={1}
  >
    {myList.map(({ columns }, i) => (
      <Item
        key={i}
        col={columns}
        colTablet={6}
        colMobile={12}
        gap={1}
        marginBottom={30}
        stretch
      >
        <div
          style={{
            textAlign: "center",
            width: "100%",
            border: "1px solid #eee",
            background: "#eee"
          }}
        >
          <p>{columns}</p>
        </div>
      </Item>
    ))}
  </Flex>
);

Sandbox

CodeSandbox