{"id":19594976,"url":"https://github.com/zessx/sass-flexbox","last_synced_at":"2025-04-27T15:34:23.925Z","repository":{"id":27285768,"uuid":"30759293","full_name":"zessx/sass-flexbox","owner":"zessx","description":"Manage Flexbox in Sass easily.","archived":false,"fork":false,"pushed_at":"2017-08-16T15:06:28.000Z","size":98,"stargazers_count":39,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T14:43:04.237Z","etag":null,"topics":["css","flex","flexbox","sass"],"latest_commit_sha":null,"homepage":"https://work.smarchal.com/sass-flexbox/","language":"CSS","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/zessx.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":"2015-02-13T14:17:10.000Z","updated_at":"2024-10-08T14:33:52.000Z","dependencies_parsed_at":"2022-09-12T14:50:55.611Z","dependency_job_id":null,"html_url":"https://github.com/zessx/sass-flexbox","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zessx%2Fsass-flexbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zessx%2Fsass-flexbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zessx%2Fsass-flexbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zessx%2Fsass-flexbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zessx","download_url":"https://codeload.github.com/zessx/sass-flexbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251162915,"owners_count":21545846,"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","flex","flexbox","sass"],"created_at":"2024-11-11T08:45:23.693Z","updated_at":"2025-04-27T15:34:19.164Z","avatar_url":"https://github.com/zessx.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://www.npmjs.com/package/sass-flexbox\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/sass-flexbox.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/sass-flexbox\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/sass-flexbox.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/sass-flexbox\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/sass-flexbox.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\n# SassFlexbox\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/zessx/sass-flexbox/master/sass-flexbox.png\" alt=\"Sass Flexbox logo\"\u003e\n\u003c/p\u003e\n\nManage Flexbox in Sass easily.\n\n## Configuration\n\n```bash\nnpm install sass-flexbox --save \n\n# or \n\nbower install zessx-sass-flexbox\n```\n\n```sass\n@import 'whatever/path/to/modules/sass-flexbox'\n```\n\n    \n## Usage\n\nSassFlexbox comes with a bunch of placeholders and mixins to help you use Flexbox without worrying about vendor prefixes. Whenever possible, extend placeholders are provided to allow you to not create so much duplicated code. Since they don't always work though (sass doesn't allow `@extend` in `@media` queries), there are also mixins available for all the shorthands.\n\nSince some flexbox values are set with numbers or other measurements, there aren't useful predefined values for them, so there aren't any extend placeholders defined.\n\n### Display\n\n- **`@mixin display-flex`**\n- **`@mixin display-inline-flex`**\n- `%display-flex`\n- `%display-inline-flex`\n\n### Flex direction\n\n- **`@mixin flex-direction($direction: row)`**\n- **`@mixin flex-direction-row`**\n- **`@mixin flex-direction-row-reverse`**\n- **`@mixin flex-direction-column`**\n- **`@mixin flex-direction-column-reverse`**\n- **`@mixin flex-direction-inherit`**\n- `%flex-direction-row`\n- `%flex-direction-row-reverse`\n- `%flex-direction-column`\n- `%flex-direction-column-reverse`\n- `%flex-direction-inherit`\n\n\n### Flex wrap\n\n- **`@mixin flex-wrap($wrap: nowrap)`**\n- **`@mixin flex-wrap-nowrap`**\n- **`@mixin flex-wrap-wrap`**\n- **`@mixin flex-wrap-wrap-reverse`**\n- **`@mixin flex-wrap-inherit`**\n- `%flex-wrap-nowrap`\n- `%flex-wrap-wrap`\n- `%flex-wrap-wrap-reverse`\n- `%flex-wrap-inherit`\n\n### Order\n\n- **`@mixin order($order: 0)`**\n\n### Flex flow\n\n- **`@mixin flex-flow($direction: row, $wrap: nowrap)`**\n\n### Flex grow\n\n- **`@mixin flex-grow($grow: 0)`**\n\n### Flex shrink\n\n- **`@mixin flex-shrink($shrink: 1)`**\n\n### Flex basis\n\n- **`@mixin flex-basis($basis: auto)`**\n\n### Flex\n\n- **`@mixin flex($grow: 0, $shrink: 1, $basis: auto)`**\n\n### Justify content\n\n- **`@mixin justify-content($justify: flex-start)`**\n- **`@mixin justify-content-flex-start`**\n- **`@mixin justify-content-flex-end`**\n- **`@mixin justify-content-center`**\n- **`@mixin justify-content-space-between`**\n- **`@mixin justify-content-space-around`**\n- **`@mixin justify-content-inherit`**\n- `%justify-content-flex-start`\n- `%justify-content-flex-end`\n- `%justify-content-center`\n- `%justify-content-space-between`\n- `%justify-content-space-around`\n- `%justify-content-space-evenly`\n- `%justify-content-inherit`\n\n### Align items\n\n- **`@mixin align-items($align: stretch)`**\n- **`@mixin align-items-flex-start`**\n- **`@mixin align-items-flex-end`**\n- **`@mixin align-items-center`**\n- **`@mixin align-items-baseline`**\n- **`@mixin align-items-stretch`**\n- **`@mixin align-items-inherit`**\n- `%align-items-flex-start`\n- `%align-items-flex-end`\n- `%align-items-center`\n- `%align-items-baseline`\n- `%align-items-stretch`\n- `%align-items-inherit`\n\n### Align self\n\n- **`@mixin align-self($align: auto)`**\n- **`@mixin align-self-auto`**\n- **`@mixin align-self-flex-start`**\n- **`@mixin align-self-flex-end`**\n- **`@mixin align-self-center`**\n- **`@mixin align-self-baseline`**\n- **`@mixin align-self-stretch`**\n- **`@mixin align-self-inherit`**\n- `%align-self-auto`\n- `%align-self-flex-start`\n- `%align-self-flex-end`\n- `%align-self-center`\n- `%align-self-baseline`\n- `%align-self-stretch`\n- `%align-self-inherit`\n\n### Align content\n\n- **`@mixin align-content($align: stretch)`**\n- **`@mixin align-content-flex-start`**\n- **`@mixin align-content-flex-end`**\n- **`@mixin align-content-center`**\n- **`@mixin align-content-space-between`**\n- **`@mixin align-content-space-around`**\n- **`@mixin align-content-stretch`**\n- **`@mixin align-content-inherit`**\n- `%align-content-flex-start`\n- `%align-content-flex-end`\n- `%align-content-center`\n- `%align-content-space-between`\n- `%align-content-space-around`\n- `%align-content-space-evenly`\n- `%align-content-stretch`\n- `%align-content-inherit`\n\n## Developing Locally\n\nThis package includes options to compile local sass files to spot check them, or to run tests with [sassaby](https://github.com/ryanbahniuk/sassaby).\n\nFirst run `npm install` to download dev dependencies.\n\nTo quickly spot-check anything you add or change, run `npm run output-dev`. It will compile the `./dev/_dev.sass` file to `./dev/output.css`.\n\nTo run tests, run `npm test`. Tests are written in `./test/index.js`.\n\n## Sources\n\n- http://www.w3.org/TR/css3-flexbox/\n- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes\n- http://caniuse.com/#feat=flexbox\n- https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzessx%2Fsass-flexbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzessx%2Fsass-flexbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzessx%2Fsass-flexbox/lists"}