💎 React component to build layouts based on the CSS Flexbox model.
- Provides a simple abstraction of the CSS Flexbox model
- Follows the Figma auto-layout model with similar properties
- Sets all necessary Flexbox parameters to enable scrolling
The component is exported from the main entry-point through an ES6 module:
import { Flex } from "reflexion";
The Flex
component uses CSS definitions that must be imported in order to work appropriately:
@import "reflexion/dist/main.css";
Note
The CSS definitions use the :has
pseudo-class, which is not supported on FireFox. To bypass this limitation, when using FireFox, Flex
introspects its children with JavaScript code, which can have a slight performance impact.
import { Flex } from "reflexion";
function Main() {
return (
<Flex width="fill" height="fill">
<Flex direction="vertical" gap={8}>
<Flex>Toolbar</Flex>
<Flex direction="vertical" height="fill" scroll>
Main view
</Flex>
<Flex>Footer</Flex>
</Flex>
</Flex>
);
}
Install with the Node Package Manager:
npm install reflexion
Documentation is generated here.