{"_id":"@4react/flex","_rev":"1-d583a1e2ed5de8511a3212652f33406f","name":"@4react/flex","dist-tags":{"latest":"2020.1.0"},"versions":{"2020.1.0":{"name":"@4react/flex","version":"2020.1.0","author":{"name":"Matteo Zanoncello"},"license":"ISC","repository":{"url":"git+https://github.com/4react/flex.git"},"main":"lib/flex.js","module":"lib/flex.module.js","types":"lib/types","scripts":{"clean":"rimraf lib","rollup":"rollup -c","build":"npm run clean && npm run rollup","story":"start-storybook -p 9009 -s .storybook/public","prepublish":"npm run build"},"dependencies":{"react":"^16.10.2","styled-components":"^5.1.1"},"peerDependencies":{"react":"^16.10.2","styled-components":"^5.1.1"},"devDependencies":{"@4react/eslint-config":"^2020.1.3","@babel/preset-env":"^7.7.1","@babel/preset-react":"^7.7.0","@babel/preset-typescript":"^7.7.0","@storybook/addon-actions":"^5.3.17","@storybook/addon-knobs":"^5.3.17","@storybook/addon-viewport":"^5.3.17","@storybook/preset-typescript":"^1.2.0","@storybook/react":"^5.3.17","@types/styled-components":"^5.1.0","@typescript-eslint/parser":"^2.26.0","babel-loader":"^8.0.6","eslint":"^6.6.0","react-docgen-typescript-loader":"^3.6.0","rimraf":"^3.0.0","rollup":"^1.26.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-postcss":"^2.0.3","rollup-plugin-typescript2":"^0.25.2","ts-loader":"^6.2.1","typescript":"^3.7.5"},"gitHead":"ef3e4bc394310de9a41f9095614b65698beff825","description":"Flexbox components for React Applications.","bugs":{"url":"https://github.com/4react/flex/issues"},"homepage":"https://github.com/4react/flex#readme","_id":"@4react/flex@2020.1.0","_nodeVersion":"14.0.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-X89wEN+zmhxB8kPCTYZx+yj9JDDRKmvekqQyGQUyMa9y/NuZo/PpVP6B7yscqxsbCWMmDTFhFzeQFGA4Y1SDDw==","shasum":"66050bd8a024a6da82ea1c7c1197ac111958b394","tarball":"https://registry.npmjs.org/@4react/flex/-/flex-2020.1.0.tgz","fileCount":12,"unpackedSize":27019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFFJTCRA9TVsSAnZWagAAOVYP/2ne4fW0uwiSBdh5+Y1a\nCfLwe2lhSfqMuK6M4tmypS+RtjokG9bSPyRdc5bEiSl9yRgQ1WOxAJEq0hKx\nZnMclzvGp3zZe/ZLoqDvY7mHvuCit+xLM+aZmwr3nZLCyxAGu/K+qQzZA2m2\n45ElQ6vyWR7Bei8ERz9aFTrntW9WsYMeejbpc6MG4JBCbM+LQO5Lt86zprAQ\nfUbwBpe+UymGm6GzIhwFqeUPpodHqUKMsNzAMTgWCZ9AlAZIsSEwlNFJ6/Eo\nmO1RqgMSdt7aMKrOht5iRMxoe30azZ010eJdNz0jXiBl0tlW6tZ4UVPY3d8p\n5Ld02aBukvenx5eBiXRcQKodfC1+YUl3ac2nlyFt0ZMoRG3JRNgS0Uvu+Dk2\nK1D7C34UbKG4peu+W9pa/0RsMLwExTgCRAEpq+86kkbuueKMbLzGl4zOIuOD\n098KDdu+ng41FdKJxtGWZaG5ysl/FA/As2HMMJXRXnwcFsUpaJWnktML0Ewf\n+zi9+I44rLyO7pQx9ffzbtxyb2Y+3KNbVTNDrtfkoaK67LuVVrwSyuxFFXye\nKk2AmMQe/bx9ss0ju5DjguwlBehM+NWvwHszbzyQq4irrP1j8LGF/F1eLR7T\nCsycZn8K7t8cGpc4bozeGPXIgV4yDbwznK9+HcGKUvLfewtmLCF0/aY7vRvE\nyy4p\r\n=FP29\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC93Y+V1VwLrf68nx+YNRMQT3BISRV8PPCYItloCQagQQIhAODZyRD3ISv4K3NWpu5J3kWwZ+9vCYDxtB855KjC+LW6"}]},"maintainers":[{"name":"matteozanoncello","email":"zanomate@gmail.com"}],"_npmUser":{"name":"matteozanoncello","email":"zanomate@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/flex_2020.1.0_1595167314942_0.8526949795875913"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-19T14:01:54.692Z","2020.1.0":"2020-07-19T14:01:55.071Z","modified":"2022-04-04T10:47:21.008Z"},"maintainers":[{"name":"matteozanoncello","email":"zanomate@gmail.com"}],"description":"Flexbox components for React Applications.","homepage":"https://github.com/4react/flex#readme","repository":{"url":"git+https://github.com/4react/flex.git"},"author":{"name":"Matteo Zanoncello"},"bugs":{"url":"https://github.com/4react/flex/issues"},"license":"ISC","readme":"# @4react / flex\r\n\r\nFlexbox components for React Applications.\r\n\r\n\r\n\r\n```jsx\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\n#### Install\r\n\r\n```\r\nnpm i @4react/flex\r\n```\r\n\r\n## Flex\r\nGeneric `div` element with `display: flex`\r\n\r\n```jsx\r\n\r\n ...\r\n\r\n```\r\n\r\n| Prop | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| inline | boolean | false | Transform in a `inline-flex` element. |\r\n| direction | `'row'`, `'column'` | `'row'` | Define the main-axis of the container i.e. where the flex items are placed. Corresponding of the `flex-direction` property (along with the `reverse` prop). |\r\n| row | boolean | false | Set the container main-axis to \"horizontal\". |\r\n| column | boolean | false | Set the container main-axis to \"vertical\". |\r\n| reverse | boolean | false | Reverse the container direction. |\r\n| justify | `'start'`, `'end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'` | `'start'` | Alignment of flex items along the main axis. Corresponding of the `justify-content` property. |\r\n| align | `'stretch'`, `'start'`, `'end'`, `'center'`, `'baseline'` | `'stretch'` | Alignment of flex items along the cross axis on the current line. Corresponding of the `align-items` property. |\r\n| lines | `'stretch'`, `'start'`, `'end'`, `'space-between'`, `'space-around'`, `'space-evenly'` | `'stretch'` | Alignment of lines (when there is extra space in the cross-axis). Corresponding of the `align-content` property. |\r\n| wrap | boolean, `'reverse'` | false | Controls if (and how) items will flow across multiple lines. |\r\n| className | string | - | Additional className for the component. |\r\n| style | object | - | Additional style object for the component. |\r\n\r\n#### Display\r\nDescription\r\n\r\n```jsx\r\n// display: flex\r\n\r\n\r\n// display: inline-flex\r\n\r\n```\r\n\r\n#### Direction\r\nDescription.\r\n\r\n```jsx\r\n// row\r\n\r\n\r\n\r\n// row-reverse\r\n\r\n\r\n\r\n// column\r\n\r\n\r\n// column-reverse\r\n\r\n\r\n```\r\n\r\n#### Justification\r\nDescription.\r\n\r\n```jsx\r\n// justify-content\r\n\r\n\r\n\r\n\r\n// align-items\r\n\r\n\r\n\r\n\r\n// align-content\r\n\r\n\r\n\r\n```\r\n\r\n#### Wrap\r\nDescription.\r\n\r\n```jsx\r\n// nowrap\r\n\r\n\r\n// wrap\r\n\r\n\r\n// wrap-reverse\r\n\r\n```\r\n\r\n## Flexed\r\n\r\n```jsx\r\n\r\n```\r\n","readmeFilename":"README.md"}