1.0.0 • Published 4 years ago

@gerardvanderput/flex-layout v1.0.0

Weekly downloads
40
License
ISC
Repository
gitlab
Last release
4 years ago

flex-layout

A simple React component that allows you to quickly create Flebox CSS elements.

Credits

Gerard van der Put, February 2021.
https://gerardvanderput.com
https://twitter.com/@GerardPut

Installation:

$ yarn add @gerardvanderput/flex-layout

Properties

The Flex component extends a regular DIV element.

propertytyperequireddefaultdescription
verticalbooleannofalseWill set flex-direction to column.
middlebooleannofalseRender children aligned to the middle (vertically).
bottombooleannofalseRender children aligned to the bottom.
centerbooleannofalseRender children aligned to the center (horizontally).
rightbooleannofalseRender children aligned to the right.

Usage:

import Flex from '@gerardvanderput/flex-layout';

return (
    <Flex style={{ height: 200 }}>
        <Flex middle center>
            Hello
        </Flex>
        <Flex bottom right>
            World!
        </Flex>
    </Flex>
)
1.0.0

4 years ago