React Flex

react-flex is a React Component to manage Flexbox layouts

For an equivalent and a recent version of the documentation with more examples, please visit the web site at https://devgalena.com/react-components/flex

Flexbox along the row direction

Create a Flexbox with flexDirection to be row ( by default ).

import { Flex } from "@devgalena/react-flex";

    <Flex>
      <span>Content 1</span>
      <span>Content 2</span>
      <span>Content 3</span>
    </Flex>

Flexbox row - Alternate

Create a Flexbox with flexDirection to be row explicitly.

import { Flex } from "@devgalena/react-flex";

    <Flex row>
      <span>Content 1</span>
      <span>Content 2</span>
      <span>Content 3</span>
    </Flex>

Flexbox - column

Create a Flexbox with flexDirection to be column.

import { Flex } from "@devgalena/react-flex";

    <Flex column>
      <span>Content 1</span>
      <span>Content 2</span>
      <span>Content 3</span>
    </Flex>

Flexbox - inline

Create a Flexbox with display set to be inline-flex.

import { Flex } from "@devgalena/react-flex";

    <Flex inline>
      <span>Content 1</span>
      <span>Content 2</span>
      <span>Content 3</span>
    </Flex>

For an equivalent and a recent version of the documentation with more examples, please visit the web site at https://devgalena.com/react-components/flex