React Flex

This package provides a flex component and styles (scss and css).

Documentation is for master

Installation

You can install this packge with either npm or yarn.

npm i @ninetynine/react-flex

An example of how to install the package through NPM.

yarn add @ninetynine/react-flex

An example of how to install the package through Yarn.

Be sure to import the styles into your main style file or into your HTML, and import the component if you wish to use it within your project.

import "~@ninetynine/flex/dist/flex"

An example of how to import into scss.

Usage

After importing the styles and component into your project you'll be able to use the <Flex /> component.

By default it will attempt to position all items inside it to the center of the container. It also has flex-wrap enabled, and flex-direction as row.

<Flex>
    <p>I'm in the middle of the container</p>
</Flex>

An example of how to pass content into Flex by using React children.

Passing content

Content can be passed by putting elements inside the tags, as shown above. Or you can take advantage of the content prop which accepts:

• a string
• a number
• a valid React element

<Flex
    content={(
    	<p>Hello, world!</p>
    )}
/>

An example of how to pass content into Flex using the content prop.

Positioning all content

If you wish to change the positioning of all items within the flex component by using different combinations of the position prop or by passing in the positions as a boolean.

The following position are supported:

start, top, left, right, bottom, end

• top will pull content to the top of the container
• left will pull content to the left of the container
• right will pull content to the right of the container
• bottom will pull content to the bottom of the container

start and end combine multiple positions:

• start combines top and left
• end combines bottom and right

Different ways of using positions:

<Flex
    position={'top left'}
 // position={'start'}
/>

An example of how to pass positions as a string.

<Flex
    top left
 // start
/>

An example of how to pass positions as truthy props.

Positioning single content elements

There are a number of classes that can be added to a content element to change it's behaviour:

• flex-shrink adds flex-shrink
• flex-grow adds flex-grow
• flex-full adds flex-grow but sets it higher than flex-grow so it will expand to fill content
• flex-no-basis adds flex-grow and disables flex-basis to make elements the same width
• flex-basis adds flex-basis
• float-left pushes the element to the left
• float-right pushes the element to the right

Changing Flex behaviour

Flex comes with a few different options to change general behaviour, for example page will make Flex cover the whole screen (width: 100vw; height: 100vh;).

The following behaviours are supported:

page, padded, row, column

• page as already described makes Flex fill the whole page
• padded adds a specified amount of padding to page
• row makes a few different behaviour changes:
  • Changes flex-direction to row
  • Removes outer margin on the first/last content
  • Removes top and bottom margin on all content
  • Disables flex-wrap
• column changes flex-direction to column

Adding custom styles and class names to Flex

Flex has the props style and className that directly alter the styles and classes of the containing element. These work the same way as they would on a standard HTML element.

It's worth noting that className will append classes to the already default Flex classes.

The scss style file makes use of three variables:

$gutter, $gutter-half, $gutter-double

By default $gutter is 20px, $gutter-half is half of $gutter- and $gutter-double is double of $gutter, so ideally you should only edit $gutter.

$gutter is used for the margins and paddings within the scss stylesheet. The css is compiled with the defaults.