simple-flexbox
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.3 • Public • Published

    Simple Flexbox

    A simple way to make responsive layouts using Flexbox in React. Typescript supported.

    Installation

    npm install simple-flexbox or yarn add simple-flexbox

    Examples

    Look at a real UI created with simple-flexbox here: https://llorentegerman.github.io/react-admin-dashboard/ and read the code here: https://github.com/llorentegerman/react-admin-dashboard.

    See examples in codesandbox.

    There are two main components, Column and Row.

    <Row vertical='center' horizontal='spaced'>
    	<Column vertical='end'>
        	<span> Content 1 </span>
            <span> Content 2 </span>
        </Column>
        <Column>
        	<span> Content 3 </span>
            <span> Content 4 </span>
            <span> Content 5 </span>
        </Column>
    </Row>

    Edit simple-flexbox examples

    Row props

    property accepted values description
    reverse true or false
    vertical 'start', 'center', 'end', 'stretch', 'baseline' at rows, vertical and alignItems are the same
    horizontal 'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'space-evenly' at rows, horizontal and justifyContent are the same
    justifyContent 'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'space-evenly' at rows, horizontal and justifyContent are the same
    alignItems 'start', 'center', 'end', 'stretch', 'baseline' at rows, vertical and alignItems are the same
    alignSelf 'start', 'center', 'end', 'stretch', 'baseline' other alignment for the cross (vertical) axis
    alignContent 'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'stretch' other alignment for the cross (vertical) axis
    flex string shorthand for grow, shrink and basis
    flexGrow number flex-grow
    flexShrink number flex-shrink
    flexBasis string flex-basis
    wrap true or false default: false
    wrapReverse true or false default: false
    any other property any i.e.: style={{bakcgroundColor: 'red'}}
    breakpoints array of objects different styles are applied depending on window.innerWidth, see Breakpoints section below
    element 'article', 'aside', 'div', 'figure', 'footer', 'form', 'header', 'main', 'nav', 'section' Defines to which html tag the styles will be applied. Default: div
    componentRef createRef() or callback ref reference
    children required

    Column props

    property accepted values description
    reverse true or false
    horizontal 'start', 'center', 'end', 'stretch', 'baseline' at column, horizontal and alignItems are the same
    vertical 'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'space-evenly' at column, vertical and justifyContent are the same
    justifyContent 'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'space-evenly' at column, vertical and justifyContent are the same
    alignItems 'start', 'center', 'end', 'stretch', 'baseline' at column, horizontal and alignItems are the same
    alignSelf 'start', 'center', 'end', 'stretch', 'baseline' other alignment for the cross (horizontal) axis
    alignContent 'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'stretch' other alignment for the cross (horizontal) axis
    flex string shorthand for grow, shrink and basis
    flexGrow number flex-grow
    flexShrink number flex-shrink
    flexBasis string flex-basis
    wrap true or false default: false
    wrapReverse true or false default: false
    any other property any i.e.: style={{bakcgroundColor: 'red'}}
    breakpoints array of objects different styles are applied depending on window.innerWidth, see Breakpoints section below
    element 'article', 'aside', 'div', 'figure', 'footer', 'form', 'header', 'main', 'nav', 'section' Defines to which html tag the styles will be applied. Default: div
    componentRef createRef() or callback ref reference
    children required

    Breakpoints

    The breakpoints property allows you to apply styles depending on window.innerWidth.

    You must indicate the maximum size for which the styles will be applied, that means that the styles will be applied as long as windows.width <= size, where size is a number. Breakpoints property must have this structure:

    {
    	size1: { styles1 },
    	size2: { styles2 },
    	...
    	sizeN: { stylesN }
    }
    

    you can also use a flexDirection value such as column, column-reverse, row, row-reverse, or a className, in this case, the name of the class cannot be any of the 4 possible values of flexDirection, so, className cannot be any of these column, column-reverse, row or row-reverse.

    {
    	size1: 'flexDirection value, for example: column, column-reverse, row or row-reverse',
    	size2: 'any className except column, column-reverse, row, row-reverse',
    	...
    	sizeN: 'column, column-reverse, row, row-reverse or className'
    }
    

    for example:

    <Column breakpoints={{
    	850: { flexDirection: 'row', backgroundColor: 'green' },
    	600: 'row-reverse'
    }}>
    	<b>Hello</b>
        <span>world!</span>
    </Column>
    

    Breakpoints styles are applied cumulatively, for example, for the Column declared above, these will be the styles, depending on window.innerWidth:

    window.innerWidth > 850 --> styles = {}

    600 < window.innerWidth <= 850 --> styles = { flexDirection: 'row', backgroundColor: 'green' }

    window.innerWidth <= 600 --> styles = { flexDirection: 'row-reverse', backgroundColor: 'green' }

    You can see this breakpoints examples in codesandbox.

    License

    This software is released under the MIT License.

    Author

    me

    Germán Llorente

    Install

    npm i simple-flexbox

    DownloadsWeekly Downloads

    753

    Version

    2.3.3

    License

    MIT

    Unpacked Size

    41.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • llorentegerman