{"id":26879964,"url":"https://github.com/ppiyush13/react-styled-flex","last_synced_at":"2025-05-07T20:12:08.591Z","repository":{"id":35156666,"uuid":"210186358","full_name":"ppiyush13/react-styled-flex","owner":"ppiyush13","description":"Simple, light, unopinionated, css standard compliant Flexbox component for React using Styled Components","archived":false,"fork":false,"pushed_at":"2023-03-06T03:54:10.000Z","size":5454,"stargazers_count":16,"open_issues_count":15,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T20:12:00.639Z","etag":null,"topics":["flex","flex-gap","flexbox","react","react-flexbox","styled","styled-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ppiyush13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-22T17:22:31.000Z","updated_at":"2023-08-24T07:39:05.000Z","dependencies_parsed_at":"2023-01-15T15:00:31.734Z","dependency_job_id":null,"html_url":"https://github.com/ppiyush13/react-styled-flex","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppiyush13%2Freact-styled-flex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppiyush13%2Freact-styled-flex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppiyush13%2Freact-styled-flex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppiyush13%2Freact-styled-flex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ppiyush13","download_url":"https://codeload.github.com/ppiyush13/react-styled-flex/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252949285,"owners_count":21830153,"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":["flex","flex-gap","flexbox","react","react-flexbox","styled","styled-components"],"created_at":"2025-03-31T13:34:18.028Z","updated_at":"2025-05-07T20:12:08.568Z","avatar_url":"https://github.com/ppiyush13.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-styled-flex\n\n[![module version and npm link][npm]][npm-url]\n[![bundlephobia minified size][size-min]][bundlephobia-url]\n[![bundlephobia minified + gzipped size][size-minzip]][bundlephobia-url]\n[![types available][package-types]][npm-url]\n[![Codacy Badge][codacy]][codacy-url]\n[![CircleCI][build]][build-url]\n[![codecov][coverage]][coverage-url]\n\nSimple, light, unopinionated, CSS standard compliant Flexbox component for [react][react-git] using [styled-components][styled-components-git]\n\n## 🎏 Changelog\n\nThis is `react-styled-flex@2` documentation. For version 1, please follow [this][version-1-docs] link. Following changes are introduced in v2:\n\n### ✂️ Breaking changes\n\n- `is` prop of FlexBox and FlexItem component is longer supported. Instead use native styled-components [\"as\" polymorphic prop][styled-components-as-prop] to render another react component or html element.\n- Supports `styled-components` version greater than or equal to `\u003e=5.1.0`. If you want to use older versions of `styled-components`, please install `react-styled-flex` v1 by using `npm install react-styled-flex@latest-1` command.\n\n### 🚀 Enhancements\n\n- Typescript rewrite.\n- ~10% lightweight than v1.\n- Supports SSR and SSG rendering.\n- Introduces [Box](#Box) component.\n- Uses `styled-components` [shouldForwardProp][styled-components-should-forward-prop] mechanism to avoid leaking props to DOM. As a result, `is` prop from v1 is no longer supported.\n\n## 🔋 Features\n\n- **Lightweight and dependency free**, ~2.7 KB minified or ~1.2 KB minified + gzipped.\n- **Clean underlying HTML DOM**. No prop leakage to DOM.\n- Supports [flex-gap][flex-gap] feature. For non supported browsers, it degrades gracefully by applying appropriate margin properties.\n- [Supports rendering](#change-underlying-element) of any react component or html element.\n- [Supports unitless values](#supports-unitless-values) wherever required.\n- Supports SSR and SSG rendering.\n- TypeScript support.\n\n## 💿 Installation\n\nYarn\n\n```sh\nyarn add react-styled-flex\n```\n\nNpm\n\n```sh\nnpm i react-styled-flex\n```\n\n**react-styled-flex** requires peer dependencies [react][react-npm] and [styled-components][styled-components-npm]. You need to add them separately.\n\n## 🔌 API\n\n- **react-styled-flex** exports three components: `Box`, `FlexBox` and `FlexItem`.\n- `Box` behaves as basic CSS box. `FlexBox` and `FlexItem` extends `Box`.\n- `FlexBox` behaves as a container with `display: flex` rule.\n- `FlexItem` as acts as a child for `FlexBox`. Though `FlexBox` can have other components as child as well.\n- Only use `FlexItem` if you need to provide additional styles to child components. See [Props](#props) section for more details.\n- `FlexItem` can be treated as `FlexBox` for nested children by setting `box` prop as `true` on `FlexItem`\n\n## 🕹 Usage\n\n**react-styled-flex** exports three components: **Box**, **FlexBox** and **FlexItem**.\nAll renders simple div with styles derived from passed props.\n\n```javascript\nimport { Box, FlexBox, FlexItem } from 'react-styled-flex';\n\nconst Layout = () =\u003e {\n  return (\n    \u003cFlexBox center\u003e\n      \u003cBox padding={10}\u003eChild 1\u003c/Box\u003e\n      \u003cFlexItem\u003eChild 2\u003c/FlexItem\u003e\n      \u003cFlexItem flex={1}\u003eChild 3\u003c/FlexItem\u003e\n    \u003c/FlexBox\u003e\n  );\n};\n```\n\nOn rendering `Layout` component,\n\n- One parent div with style `display: flex; justify-content: center; align-items: center` and three nested divs will be rendered.\n  - First child will have padding of `10px`.\n  - Second child will be simple div.\n  - Third child will have style `flex: 1;`\n\nFor rendering elements other than divs, please refer [Change underlying element\n](#change-underlying-element) section.\n\n## 🎛 Props\n\n### Box\n\n- All props are **optional**.\n- Shorthand syntax for margin and padding props are supported.\n\n| Props             |               Type               | Description                                                                  |\n| ----------------- | :------------------------------: | ---------------------------------------------------------------------------- |\n| sizing            |             _string_             | Applies [box-sizing][box-sizing-mdn]                                         |\n| position          |             _string_             | Applies [position][position-mdn]                                             |\n| height            | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies [height][height-mdn]                                                 |\n| maxHeight         | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies [max-height][max-height-mdn]                                         |\n| minHeight         | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies [min-height][min-height-mdn]                                         |\n| width             | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies [width][width-mdn]                                                   |\n| maxWidth          | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies [max-width][max-width-mdn]                                           |\n| minWidth          | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies [min-width][min-width-mdn]                                           |\n| m, margin         | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies margin using CSS [margin][margin-mdn] shorthand specification        |\n| mt, marginTop     | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies margin using CSS [margin-top][margin-top-mdn] specification          |\n| mr, marginRight   | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies margin using CSS [margin-right][margin-right-mdn] specification      |\n| mb, marginBottom  | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies margin using CSS [margin-bottom][margin-bottom-mdn] specification    |\n| ml, marginLeft    | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies margin using CSS [margin-left][margin-left-mdn] specification        |\n| p, padding        | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies padding using CSS [padding][padding-mdn] shorthand specification     |\n| pt, paddingTop    | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies padding using CSS [padding-top][padding-top-mdn] specification       |\n| pr, paddingRight  | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies padding using CSS [padding-right][padding-right-mdn] specification   |\n| pb, paddingBottom | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies padding using CSS [padding-bottom][padding-bottom-mdn] specification |\n| pl,paddingLeft    | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies padding using CSS [padding-left][padding-left-mdn] specification     |\n| border            | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies border using CSS [border][border-mdn] shorthand specification        |\n\n### FlexBox\n\n- All props are **optional**.\n- All boolean props defaults to **false**.\n- All [Box](#box) props are also applicable.\n\n| Props          |               Type               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                            |\n| -------------- | :------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| inline         |            _boolean_             | If true, applies `display: inline-flex` rule otherwise applies `display: flex`                                                                                                                                                                                                                                                                                                                                                                                         |\n| column         |            _boolean_             | If true, `flex-direction` rule is set as `column` otherwise set as `row`                                                                                                                                                                                                                                                                                                                                                                                               |\n| reverse        |            _boolean_             | It works in tandem with `column` prop to generate `flex-direction: {row\\|column}-reverse`. Following table summaries it,\u003cbr/\u003e \u003ctable\u003e\u003cthead\u003e\u003ctr\u003e\u003cth\u003ecolumn\u003c/th\u003e\u003cth\u003ereverse\u003c/th\u003e\u003cth\u003eflex\u0026minus;direction\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003erow\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003etrue\u003c/td\u003e\u003ctd\u003erow-reverse\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003etrue\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003ecolumn\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003etrue\u003c/td\u003e\u003ctd\u003etrue\u003c/td\u003e\u003ctd\u003ecolumn-reverse\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e |\n| wrap           |            _boolean_             | If true, applies `flex-wrap` as `wrap`                                                                                                                                                                                                                                                                                                                                                                                                                                 |\n| wrapReverse    |            _boolean_             | If true, applies `flex-wrap` as `wrap-reverse`                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| center         |            _boolean_             | If true, then applies `justify-content: center` and `align-items: center`                                                                                                                                                                                                                                                                                                                                                                                              |\n| gap            | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies gap using CSS [gap][gap-mdn] shorthand specification if browser supports it, otherwise fallbacks to using margin property. Read [flex gap feature](#supports-flex-gap-feature) to understand more                                                                                                                                                                                                                                                              |\n| columnGap      | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies CSS [column-gap][column-gap-mdn] property if browser supports it, otherwise fallbacks to using margin property. Read [flex gap feature](#supports-flex-gap-feature) to understand more                                                                                                                                                                                                                                                                         |\n| rowGap         | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies CSS [row-gap][row-gap-mdn] property if browser supports it, otherwise fallbacks to using margin property. Read [flex gap feature](#supports-flex-gap-feature) to understand more                                                                                                                                                                                                                                                                               |\n| justifyItems   |             _string_             | Applies `justify-items` rule. Depending on the browser, [these justify-items][justify-items-mdn] values might be supported                                                                                                                                                                                                                                                                                                                                             |\n| justifyContent |             _string_             | Applies `justify-content` rule. Depending on the browser, [these justify-content][justify-content-mdn] values might be supported                                                                                                                                                                                                                                                                                                                                       |\n| alignItems     |             _string_             | Applies `align-items` rule. Depending on the browser, [these align-items][align-items-mdn] values might be supported                                                                                                                                                                                                                                                                                                                                                   |\n| alignContent   |             _string_             | Applies `align-content` rule. Depending on the browser, [these align-content][align-content-mdn] values might be supported                                                                                                                                                                                                                                                                                                                                             |\n\n### FlexItem\n\n- All props are **optional**.\n- All boolean props defaults to **false**.\n- All [Box](#box) props are also applicable.\n- All [FlexBox](#flexBox) props are applicable if `box` prop is set to true.\n\n| Props       |               Type               | Description                                                                                                              |\n| ----------- | :------------------------------: | ------------------------------------------------------------------------------------------------------------------------ |\n| flex        | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies flex using CSS [flex][flex-prop-mdn] shorthand specification                                                     |\n| grow        | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies CSS [flex-grow][flex-grow-mdn] property                                                                          |\n| shrink      | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies CSS [flex-shrink][flex-shrink-mdn] property                                                                      |\n| basis       | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies CSS [flex-basis][flex-basis-mdn] property                                                                        |\n| order       | _string\u0026nbsp;\u0026vert;\u0026nbsp;number_ | Applies CSS [order][order-mdn] property                                                                                  |\n| justifySelf |             _string_             | Applies `justify-self` rule. Depending on the browser, [these justify-self][justify-self-mdn] values might be supported. |\n| alignSelf   |             _string_             | Applies `align-self` rule. Depending on the browser, [these align-self][align-self-mdn] values might be supported        |\n| box         |            _boolean_             | If true, then FlexItem also behaves as a FlexBox. In addition to FlexItem props, all the FlexBox props are applicable    |\n\n## 📽 Features explained\n\n### Supports unitless values\n\n- **react-styled-flex** supports unitless values where units are required. In that case value will be auto suffixed with with `px` unit.\u003cbr/\u003e\n- Only values where unites are required(eg. **height, width, margin**) will be suffixed.\n- CSS rules which don't have units won't be suffixed (eg. **order**)\n\n### Supports flex gap feature\n\n- Browser supports flex gap feature\n\n  - If [flex gap feature][flex-gap] is supported in browser than gap, columnGap and rowGap props will function as per specification.\n\n- Browser don't support flex gap feature\n  - If browser does not supports it, then we intend to provide graceful degradation of flex gap feature by setting margin. This fallback is provided only if, either of **gap props** is set and **wrap** prop is not set.\n  - If **wrap** is set then gap wont work in non-supported browser.\n  - Rest all props are supported.\n\n### Change underlying element\n\nBy default `FlexBox` and `FlexItem` renders div in the DOM. We can change it to any HTML element or react component using `styled-components` [as][styled-components-as-prop] prop.\\\nExample:\n\n```jsx\nimport { FlexBox, FlexItem } from 'react-styled-flex';\n\n/* other logic */\n\n\u003cFlexBox center\u003e\n  \u003cFlexItem as={'button'}\u003eChild 1\u003c/FlexItem\u003e\n  \u003cFlexItem as={'button'}\u003eChild 2\u003c/FlexItem\u003e\n\u003c/FlexBox\u003e;\n```\n\nRenders `Child 1` and `Child 2` as button. Similarly any react component can be rendered.\n\n## ❓ FAQ\n\n### Where can I find examples ?\n\nWorking example of `react-styled-flex` with frameworks like `create-react-app`, `gatsby`, `next.js`, `parcel` can be found in [examples](/examples) directory of this repo. Both javascript and typescript variants are available. If any cool react framework is missing, raise a PR, we will be happy to get added.\n\n### Why unstyled content appears during initial page render ?\n\nIn SSR or SSG rendering, web pages may [flash unstyled content][fouc] for brief moment of time when page layout is done using `react-styled-flex` `gap` prop. Though web page corrects itself as soon as react hydration runs, the shift may be distracting for end users.\n\n![fouc example](/assets/fouc.gif)\n\nIn order to fix this issue, we have to provide css class `flex-gap-not-supported` to body tag.\\\nBelow are the fixes available for next.js and gatsby.\n\n\u003cdetails\u003e\n  \u003csummary\u003enext.js\u003c/summary\u003e\n\nAdd custom `Document` to your application within `pages/_document.js`. Here is the minimal `_document` example\n\n```jsx\n// pages/_document.js\nimport Document, { Html, Head, Main, NextScript } from 'next/document';\nimport { FlexGapNotSupportedClassName } from 'react-styled-flex';\n\nexport default class MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    return { ...initialProps };\n  }\n\n  render() {\n    return (\n      \u003cHtml\u003e\n        \u003cHead /\u003e\n        \u003cbody className={FlexGapNotSupportedClassName}\u003e\n          \u003cMain /\u003e\n          \u003cNextScript /\u003e\n        \u003c/body\u003e\n      \u003c/Html\u003e\n    );\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003egatsby\u003c/summary\u003e\n\nCustomize `gatsby-ssr.js` module to implement `onRenderBody` API. Minimal example is shown below:\n\n```jsx\n// gatsby-ssr.js\nconst React = require('react');\nconst { FlexGapNotSupportedClassName } = require('react-styled-flex');\n\nexports.onRenderBody = ({ setBodyAttributes }) =\u003e {\n  setBodyAttributes({\n    className: FlexGapNotSupportedClassName,\n  });\n};\n```\n\n\u003c/details\u003e\n\nYou may also refer to examples directory for complete working demo.\n\n## ⚖️ License\n\nMIT © Piyush Lodaya\n\n## 🗃 Resources\n\n- [A Complete Guide to Flexbox][flex-guide-css-tricks]\n- [CSS Flexible Box Layout][flex-guide-mdn]\n\n[npm]: https://img.shields.io/npm/v/react-styled-flex\n[npm-url]: https://www.npmjs.com/package/react-styled-flex\n[size-min]: https://img.shields.io/bundlephobia/min/react-styled-flex@latest\n[size-minzip]: https://img.shields.io/bundlephobia/minzip/react-styled-flex@latest\n[bundlephobia-url]: https://bundlephobia.com/result?p=react-styled-flex@latest\n[package-types]: https://img.shields.io/npm/types/react-styled-flex\n[codacy]: https://api.codacy.com/project/badge/Grade/3883d0db80a44fa6b18a311be25a8553\n[codacy-url]: https://www.codacy.com/manual/ppiyush13/react-styled-flex?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=ppiyush13/react-styled-flex\u0026utm_campaign=Badge_Grade\n[build]: https://circleci.com/gh/ppiyush13/react-styled-flex/tree/master.svg?style=shield\n[build-url]: https://circleci.com/gh/ppiyush13/react-styled-flex/tree/master\n[coverage]: https://codecov.io/gh/ppiyush13/react-styled-flex/branch/master/graph/badge.svg\n[coverage-url]: https://codecov.io/gh/ppiyush13/react-styled-flex\n[styled-components-git]: https://github.com/styled-components/styled-components\n[react-git]: https://github.com/facebook/react\n[flex-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap#Flex_layout\n[styled-components-npm]: https://www.npmjs.com/package/styled-components\n[react-npm]: https://www.npmjs.com/package/react\n[box-sizing-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#syntax\n[position-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#syntax\n[height-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/height#syntax\n[max-height-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#syntax\n[min-height-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#syntax\n[width-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/width#syntax\n[max-width-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax\n[min-width-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#syntax\n[padding-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax\n[padding-top-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top#syntax\n[padding-right-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right#syntax\n[padding-bottom-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom#syntax\n[padding-left-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left#syntax\n[margin-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Syntax\n[margin-top-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top#Syntax\n[margin-right-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right#Syntax\n[margin-bottom-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom#Syntax\n[margin-left-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left#Syntax\n[border-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/border#Syntax\n[justify-items-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#values\n[justify-content-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Values\n[align-items-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#Values\n[align-content-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#Values\n[gap-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap#Syntax\n[row-gap-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap#Syntax\n[column-gap-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#Syntax\n[order-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/order#Syntax\n[flex-prop-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/flex#Syntax\n[flex-grow-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow#Syntax\n[flex-shrink-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink#Syntax\n[flex-basis-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Syntax\n[justify-self-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self#values\n[align-self-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self#Values\n[flex-guide-css-tricks]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n[flex-guide-mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout\n[version-1-docs]: https://github.com/ppiyush13/react-styled-flex/blob/v1/README.md\n[styled-components-should-forward-prop]: https://styled-components.com/docs/api#shouldforwardprop\n[styled-components-as-prop]: https://styled-components.com/docs/api#as-polymorphic-prop\n[fouc]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppiyush13%2Freact-styled-flex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fppiyush13%2Freact-styled-flex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppiyush13%2Freact-styled-flex/lists"}