Flex

Flex is wrapper for your items which needs to be placed as flexible boxes. It is used to group multiple items both vertically and horizontally

Usage

Simply import Flex from axis:

home.js

import React from 'react'
import { Flex, Text } from '@therise3107/axis'

const home = () => (
    <Flex>
        <Text>Sample text 1</Text>
        <Text>Sample text 2</Text>
    </Flex>
)

Flex component is theme agnostic, it is purely prop based

Concept

Flex uses x-axis and y-axis to lay the flex-items, by default the direction of flex is row. We use the concept of main-axis and cross-axis

• main-axis is the axis around which flex is laying it items, by default row

• cross-axis is the perpendicular axis to the main axis, by default column

This means changing flex-direction should also reverse the main-axis to cross-axis and vice versa, for this reason, we first need to define the main-axis and cross-axis

Property	crossAxis	mainAxis
initial	✅	✅
top	✅	✅
bottom	✅	✅
center	✅	✅
end	✅	✅
stretch	✅	✅
spaceBetween	-	✅
spaceAround	-	✅
spaceEvenly	-	✅
stretch	-	✅

If we reverse the flex-direction, then crossAxis and mainAxis are also changed

API Reference

Prop	Type
align	Object.keys(crossAxis)
justify	Object.keys(mainAxis)
height	String or Number
reversed	Bool
width	String or Number
zIndex	Number

If we pass reversed to Flex, align and justify are interchanged as well

Further reading

You can also read about Aligning of items in Flex at MDN here