# flxbx > A minimalistic flexbox library for React Latest version **1.0.1** (published 2017-09-20) · MIT license · 0 weekly downloads ## Install ```sh npm install flxbx pnpm add flxbx yarn add flxbx bun add flxbx ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.1 | | Published | 2017-09-20 | | First published | 2017-09-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 4 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | RC | | Maintainers | rcdexta | | Keywords | flexbox, grid | ## Links - npm: https://www.npmjs.com/package/flxbx - Repository: https://github.com/rcdexta/flxbx - Issues: https://github.com/rcdexta/flxbx/issues - npm.io page: https://npm.io/package/flxbx ## Dependencies (4) - [react](https://npm.io/package/react.md) ^15.6.1 - [react-dom](https://npm.io/package/react-dom.md) ^15.6.1 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.10 - [styled-components](https://npm.io/package/styled-components.md) ^2.1.2 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.0.1 (latest) — 2017-09-20 - 1.0.0 — 2017-09-03 ## README # flxbx A minimalistic flexbox library for React [![Build Status](https://travis-ci.org/rcdexta/flxbx.svg?branch=master)](https://travis-ci.org/rcdexta/flxbx) [![npm version](https://badge.fury.io/js/flxbx.svg)](https://badge.fury.io/js/flxbx) ## Why? Most react libraries for flexbox are bloated. I wrote this for myself as a utility to contain the minimal directives for flexbox to quickly prototype a custom layout with a container containing multiple children each with their own flex specifications. ## Features * minimalistic and light weight * direct wrapper over flexbox specification [see here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) ## Getting Started Use npm or yarn to add this as dependency ```bash npm install -save flxbx ``` or ```bash yarn add flxbx ``` ## Usage `Flxbx` defines two components to describe the flexbox specification for parent container as well as child components. Consider the layout below: ![alt tag](https://github.com/rcdexta/flxbx/raw/master/assets/parent.png) This can be defined using the following DSL. Read through the values assigned to props to better understand the layout used. Note that `Box` is just an arbitrary component used to visually represent the effect of flex layout and is not part of the library. ```jsx ``` To tweak the position of individual child elements, read through the example below ![alt tag](https://github.com/rcdexta/flxbx/raw/master/assets/child.png) ```jsx ``` `FlxEl` takes a component as element prop and passes all other props not relevant to flxbx library. Please check the examples in the [storybook](https://rcdexta.github.io/flxbx) for detailed documentation about possible prop values ## Documentation ### FlxBx Parent component to define the container level flex properties | Name | Type | Description (default value) | Flexbox Reference | | --------- | ------- | ---------------------------------------- | ---------------------------------------- | | direction | string | How flex items are placed in the flex container defining the main axis and the direction (row) | [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) | | reverse | boolean | Reverse flex direction (false) | - | | justify | string | Defines how the browser distributes space between and around content items along the main axis of their container (flex-start) | [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | | align | string | defines how the browser distributes space between and around flex items along the cross-axis of their container (flex-start) | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | ### FlxEl Wrapper component for defining flex properties for child elements | Name | Type | Description (default value) | Flexbox Reference | | ------- | ------ | ---------------------------------------- | ---------------------------------------- | | element | object | Actual component to be rendered as child | - | | align | string | aligns flex items of the current flex line overriding the [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) value (auto) | [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) | | basis | string | specifies the flex basis which is the initial **main size** of a flex item (auto) | [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) | | grow | string | specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up (0) | [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) | | shrink | string | specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the `flex-shrink` number, when the default width of flex items is wider than the flex container (1) | [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) | ## License MIT --- _Source: https://npm.io/package/flxbx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._