📦 react-flexbox-z

LIVE EXAMPLE

• Wrapper for flexbox.
• Quick styled-components
• Support tag: div, nav, main, aside, article, header, section, footer

Features

• ⚡ Simple Flexbox wrapper using styled-components.
• 🔥 Quick utility props (row, column, justifyCenter, etc.).
• 🏷️ Supports semantic tags: div, nav, main, aside, article, header, section, footer.
• 🎯 Includes Flex.Item for child element control.

Installation

npm install react-flexbox-z
# or
yarn add react-flexbox-z

Usage

import Flex from "react-flexbox-z";

export default function App() {
  return (
    <Flex as="main" column alignItemsCenter justifyCenter>
      <h1>Hello Flexbox</h1>
      <Flex.Item grow>
        <p>This is a child that grows</p>
      </Flex.Item>
      <Flex.Item>
        <button>Click me</button>
      </Flex.Item>
    </Flex>
  );
}

Examples

Basic row layout

<Flex row justifySpaceBetween alignItemsCenter>
  <Flex.Item>Left</Flex.Item>
  <Flex.Item>Right</Flex.Item>
</Flex>

Column centered

<Flex column alignItemsCenter justifyCenter style={{ height: "100vh" }}>
  <Flex.Item>Centered Item 1</Flex.Item>
  <Flex.Item>Centered Item 2</Flex.Item>
</Flex>

Wrap items

<Flex wrap gap="16px">
  <Flex.Item basis="120px">Box 1</Flex.Item>
  <Flex.Item basis="120px">Box 2</Flex.Item>
  <Flex.Item basis="120px">Box 3</Flex.Item>
  <Flex.Item basis="120px">Box 4</Flex.Item>
</Flex>

Flexible growth

<Flex row>
  <Flex.Item grow={1}>Sidebar</Flex.Item>
  <Flex.Item grow={3}>Content</Flex.Item>
</Flex>

API

Flex

<Flex row />
<Flex column />
<Flex wrap />
<Flex justifyCenter />
<Flex alignItemsStretch />

Props (shortcuts):

• Direction: row, column, rowReverse, columnReverse
• Wrap: wrap, noWrap, wrapReverse
• Justify: justifyStart, justifyEnd, justifyCenter, justifySpaceBetween, justifySpaceAround
• Align Items: alignItemsStart, alignItemsEnd, alignItemsCenter, alignItemsBaseline, alignItemsStretch
• Align Content: alignContentStart, alignContentEnd, alignContentCenter, alignContentSpaceBetween, alignContentSpaceAround, alignContentStretch

Flex.Item

<Flex.Item grow={1} basis="50%" alignSelfCenter>
  Child
</Flex.Item>

Props (shortcuts):

• order
• grow
• shrink
• basis
• flex
• alignSelf (auto, start, end, center, baseline, stretch)

Notes

• Check the TypeScript typings (d.ts) for all supported props.
• Designed for styled-components.

License

MIT