https://github.com/alexanderjeurissen/flex

A declarative React primitive Flex component that exposes flexbox specification in JSX
https://github.com/alexanderjeurissen/flex

component css css-flex css-flexbox css-flexbox-layout flex-component flexbox-specification jsx primitive react styled-components styled-system

Last synced: 3 months ago
JSON representation

A declarative React primitive Flex component that exposes flexbox specification in JSX

• Host: GitHub
• URL: https://github.com/alexanderjeurissen/flex
• Owner: alexanderjeurissen
• License: mit
• Created: 2020-06-14T19:12:15.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-07-11T03:21:28.000Z (over 1 year ago)
• Last Synced: 2024-09-16T01:04:01.575Z (5 months ago)
• Topics: component, css, css-flex, css-flexbox, css-flexbox-layout, flex-component, flexbox-specification, jsx, primitive, react, styled-components, styled-system
• Language: TypeScript
• Size: 623 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![image](public/assets/logo.png)

> Be infinitely flexible and constantly amazed. - Jason Kravitz

A declarative React primitive Flex component that exposes the flexbox specification in JSX

Based on Styled System and Styled Components. Written in typescript to provide strict prop validation on css spec adherence.

## Usage

Import as follows:

`import Flex from 'react-flex-primitive';`

Then use the Flex component to define the desired flexbox layout:

e.g. for a Flex container that has vertically aligned flex-items, where the first flex item grows:

```

 

   This flex item grows!

 

 

  This flex item does not grow :(

 

```

## Additional resources

- https://www.w3.org/TR/css-flexbox-1/

- https://css-tricks.com/snippets/css/a-guide-to-flexbox/