{"id":13518647,"url":"https://github.com/jxnblk/reflexbox","last_synced_at":"2025-09-28T19:31:14.101Z","repository":{"id":57142792,"uuid":"44027144","full_name":"jxnblk/reflexbox","owner":"jxnblk","description":"Moved to https://rebassjs.org","archived":true,"fork":false,"pushed_at":"2018-01-23T13:31:47.000Z","size":1652,"stargazers_count":1351,"open_issues_count":0,"forks_count":71,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-01-07T07:36:37.789Z","etag":null,"topics":["css-in-js","flexbox","grid","grid-component","react","react-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jxnblk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-10T20:30:15.000Z","updated_at":"2024-11-19T08:22:47.000Z","dependencies_parsed_at":"2022-09-05T11:50:23.575Z","dependency_job_id":null,"html_url":"https://github.com/jxnblk/reflexbox","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freflexbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freflexbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freflexbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freflexbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jxnblk","download_url":"https://codeload.github.com/jxnblk/reflexbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234452073,"owners_count":18834740,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-in-js","flexbox","grid","grid-component","react","react-component"],"created_at":"2024-08-01T05:01:47.290Z","updated_at":"2025-09-28T19:31:13.744Z","avatar_url":"https://github.com/jxnblk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Layout","Soluções","Featured Projects","Uncategorized"],"sub_categories":["Form Components","[Sketching with CSS](http://www.sketchingwithcss.com) Flexbox Guide by [@sfioritto](https://github.com/sfioritto)","Uncategorized"],"readme":"\n# Reflexbox\n\nResponsive React Flexbox Grid System\n\nhttp://jxnblk.com/reflexbox\n\n[![Build Status](https://travis-ci.org/jxnblk/reflexbox.svg?branch=master)](https://travis-ci.org/jxnblk/reflexbox)\n[![npm version](https://badge.fury.io/js/reflexbox.svg)](https://badge.fury.io/js/reflexbox)\n\n\n## Features\n\n- Simple API for quickly controlling layout\n- Helps promote composability and separation of concerns\n- CSS-in-JS built in - no external dependencies\n- Only generates the CSS needed to render\n\n## Getting Started\n\n```\nnpm install reflexbox\n```\n\n```jsx\nimport React from 'react'\nimport { Flex, Box } from 'reflexbox'\n\nclass Component extends React.Component {\n  render() {\n    return (\n      \u003cFlex p={2} align='center'\u003e\n        \u003cBox px={2} w={1/2}\u003eBox A\u003c/Box\u003e\n        \u003cBox px={2} w={1/2}\u003eBox B\u003c/Box\u003e\n      \u003c/Flex\u003e\n    )\n  }\n}\n```\n\n## Usage\n\n```jsx\n// Fractional width\n\u003cBox w={1/2} /\u003e\n\n// Pixel width\n\u003cBox w={128} /\u003e\n\n// Responsive widths\n\u003cBox w={[ 1, 1/2, 1/4 ]} /\u003e\n\n// Padding\n\u003cBox p={2} /\u003e\n\n// Responsive padding\n\u003cBox p={[ 1, 2, 3 ]} /\u003e\n\n// Margin\n\u003cBox m={2} /\u003e\n\n// Responsive margin\n\u003cBox m={[ 1, 2, 3 ]} /\u003e\n\n// top, right, bottom, left\n\u003cBox\n  mt={1}\n  mr={2}\n  mb={3}\n  ml={2}\n/\u003e\n\n// x-axis\n\u003cBox mx={-2} /\u003e\n\n// y-axis\n\u003cBox my={3} /\u003e\n\n// align-items: center\n\u003cFlex align='center' /\u003e\n\n// justify-content: space-between\n\u003cFlex justify='space-between' /\u003e\n\n// Flex wrap\n\u003cFlex wrap /\u003e\n\n// Flex direction column\n\u003cFlex column /\u003e\n\n// Order\n\u003cBox order={2} /\u003e\n\n// flex: 1 1 auto\n\u003cBox auto /\u003e\n```\n\n## API\n\n### `\u003cFlex /\u003e`\n\nComponent primitive with `display: flex`\n\n### `\u003cBox /\u003e`\n\nPrimitive for controlling width, margin, padding and more.\n\n### Props\n\nBoth `\u003cFlex /\u003e` and `\u003cBox /\u003e` share the same props.\n\n- `w` (number|string) sets width, where numbers 0-1 are percentage values, larger numbers are pixel values, and strings are raw CSS values with units.\n- `flex` (boolean) sets `display: flex`\n- `wrap` (boolean) sets `flex-wrap: wrap`\n- `column` (boolean) sets `flex-direction: column`\n- `auto` (boolean) sets `flex: 1 1 auto`\n- `order` (number) sets `order`\n- `align` (string) sets `align-items`\n- `justify` (string) sets `justify-content`\n\n#### Margin and Padding\n\nMargin and padding props accept numbers `0-4` for values from the spacing scale `[ 0, 8, 16, 32, 64 ]`.\nNumbers greater than 4 will be used as pixel values.\nNegative values can be used for negative margins.\nStrings can be passed for other CSS values, e.g. `mx='auto'`\n\n- `m`  (number|string) margin based on a scale from 0–4.\n- `mx` (number|string) x-axis margin based on a scale from 0–4.\n- `my` (number|string) y-axis margin based on a scale from 0–4.\n- `mt` (number|string) margin-top based on a scale from 0–4.\n- `mb` (number|string) margin-bottom based on a scale from 0–4.\n- `ml` (number|string) margin-left based on a scale from 0–4.\n- `mr` (number|string) margin-right based on a scale from 0–4.\n- `p`  (number|string) padding based on a scale from 0–4.\n- `px` (number|string) x-axis padding based on a scale from 0–4.\n- `py` (number|string) y-axis padding based on a scale from 0–4.\n- `pt` (number|string) padding-top based on a scale from 0–4.\n- `pb` (number|string) padding-bottom based on a scale from 0–4.\n- `pl` (number|string) padding-left based on a scale from 0–4.\n- `pr` (number|string) padding-right based on a scale from 0–4.\n\n### Responsive Array Prop Values\n\nAll props accept arrays as values for mobile-first responsive styles.\n\n```jsx\n// Set widths for different breakpoints, starting from smallest to largest\n// This example will be 100% width below the smallest breakpoint,\n// then 50% and 25% for the next two breakpoints respectively\n\u003cBox w={[ 1, 1/2, 1/4 ]} /\u003e\n```\n\nNull values can be passed to the array to skip a breakpoint.\n\n```jsx\n\u003cBox w={[ 1, null, 1/2 ]} /\u003e\n```\n\n\n## Configuration\n\nValues for the breakpoints and space scale can be configured with\n[React Context](https://facebook.github.io/react/docs/context.html).\n\nContext can be set manually or with the `\u003cReflexProvider /\u003e` component.\n\n\n```jsx\nimport React from 'react'\nimport { ReflexProvider, Flex, Box } from 'reflexbox'\n\nconst space = [ 0, 6, 12, 18, 24 ]\nconst breakpoints = [ 32, 48, 64 ]\n\nclass App extends React.Component {\n  render () {\n    return (\n      \u003cReflexProvider\n        space={space}\n        breakpoints={breakpoints}\u003e\n        \u003cFlex mx={-2}\u003e\n          \u003cBox w={1/4} px={2}\u003eBox\u003c/Box\u003e\n          \u003cBox w={1/4} px={2}\u003eBox\u003c/Box\u003e\n          \u003cBox w={1/4} px={2}\u003eBox\u003c/Box\u003e\n          \u003cBox w={1/4} px={2}\u003eBox\u003c/Box\u003e\n        \u003c/Flex\u003e\n      \u003c/ReflexProvider\u003e\n    )\n  }\n}\n```\n\n## Higher Order Component\n\nThe core Reflexbox higher-order component can be used on any element that accepts `className` as a prop.\n\n```jsx\nimport React from 'react'\nimport { reflex } from 'reflexbox'\nimport MyInput from './MyInput'\n\nconst FlexInput = reflex(MyInput)\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cFlexInput\n      w={1/2}\n      mb={2}\n      defaultValue='Flex Input'\n    /\u003e\n  \u003c/div\u003e\n)\n```\n\n### Caveats\n\nThis currently *DOES NOT* work in Node.js server-side applications.\nIf you need server-side support, see version `^2.2.0` or one of the related libraries below.\n\n---\n\n### Related\n\n- [Axs](http://jxnblk.com/axs)\n- [Grid Styled](http://jxnblk.com/grid-styled)\n- [Gx](http://jxnblk.com/gx)\n- [Rebass](http://jxnblk.com/rebass)\n- [Reline](http://jxnblk.com/reline)\n\n[MIT License](.github/LICENSE.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Freflexbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjxnblk%2Freflexbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Freflexbox/lists"}