{"id":16760513,"url":"https://github.com/ryanve/flexboxes","last_synced_at":"2025-10-25T15:41:44.436Z","repository":{"id":49024702,"uuid":"92267484","full_name":"ryanve/flexboxes","owner":"ryanve","description":"CSS flexbox framework with pure flexbox grid ability","archived":false,"fork":false,"pushed_at":"2021-06-30T19:24:29.000Z","size":112,"stargazers_count":31,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-02T00:08:38.792Z","etag":null,"topics":["css","flex","flexbox","functional-css","grid","grid-system","grids","layout","layouts"],"latest_commit_sha":null,"homepage":"https://ryanve.github.io/flexboxes","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"ryanve","patreon":"ryanve","open_collective":"ryanve","ko_fi":"ryanve"}},"created_at":"2017-05-24T08:14:21.000Z","updated_at":"2023-11-07T06:52:24.000Z","dependencies_parsed_at":"2022-08-30T04:51:25.286Z","dependency_job_id":null,"html_url":"https://github.com/ryanve/flexboxes","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fflexboxes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fflexboxes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fflexboxes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fflexboxes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanve","download_url":"https://codeload.github.com/ryanve/flexboxes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221820522,"owners_count":16886214,"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","functional-css","grid","grid-system","grids","layout","layouts"],"created_at":"2024-10-13T04:23:45.033Z","updated_at":"2025-10-25T15:41:39.373Z","avatar_url":"https://github.com/ryanve.png","language":"HTML","readme":"# flexboxes\n[flexboxes](https://ryanve.github.io/flexboxes) is a functional flexbox library and pure flexbox grid system designed for prototyping and production.\n\n## setup\n\nDownload [flexboxes.css](flexboxes.css) and load [stylesheet](https://dev.opera.com/articles/css-basics/#external)\n\n```html\n\u003clink rel=\"stylesheet\" href=\"flexboxes.css\"\u003e\n```\n\n- Browse [releases](../../releases) or the [latest release](../../releases/latest)\n- [Codepens](https://codepen.io) can link [unpkg](https://unpkg.com/flexboxes)\n- Dependers can [npm install flexboxes](https://www.npmjs.com/package/flexboxes) and `@import` via `node_modules`\n- Deprecated classes are in [deprecated.css](deprecated.css)\n\n## [classes](flexboxes.css)\n\n### [`display`](https://www.w3.org/TR/css-flexbox-1/#flex-containers)\n- `.flex-inline` for `inline-flex`\n- `.flex-block` for `flex`\n\n### [`flex-flow`](https://www.w3.org/TR/css-flexbox-1/#flex-flow-property)\n\n- Compose [`flex-direction`](#flex-direction) [`flex-wrap`](#flex-wrap)\n- Default is `row nowrap`\n\n### [`flex-direction`](https://www.w3.org/TR/css-flexbox-1/#flex-direction-property)\n\n- `.flow-east` for `row`\n- `.flow-west` for `row-reverse`\n- `.flow-south` for `column`\n- `.flow-north` for `column-reverse`\n\n### [`flex-wrap`](https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property)\n\n- `.flow-over` for `nowrap`\n- `.flow-wrap` for `wrap`\n- `.flow-warp` for `wrap-reverse`\n\n### [`margin`](https://www.w3.org/TR/css-flexbox-1/#auto-margins)\n\n\u003ca name=\"distribute-free-space\" href=\"https://ryanve.github.io/flexboxes#freeing\"\u003eDistribute free space\u003c/a\u003e via `auto` margins\n\n- `.free-all` frees all\n- `.free-top` frees top\n- `.free-bottom` frees bottom\n- `.free-left` frees left\n- `.free-right` frees right\n- `.free-north` frees block-start\n- `.free-south` frees block-end\n- `.free-west` frees inline-start\n- `.free-east` frees inline-end\n\n### [`order`](https://www.w3.org/TR/css-flexbox-1/#order-property)\n- `.order-before`\n- `.order-after`\n\n### [`align-items`](https://www.w3.org/TR/css-flexbox-1/#align-items-property)\n- `.items-start`\n- `.items-end`\n- `.items-center`\n- `.items-baseline`\n- `.items-stretch`\n\n### [`align-self`](https://www.w3.org/TR/css-flexbox-1/#align-items-property)\n- `.self-center`\n- `.self-baseline`\n- `.self-stretch`\n- `.self-start`\n- `.self-end`\n\n### [`justify-content`](https://www.w3.org/TR/css-flexbox-1/#justify-content-property)\n- `.just-start`\n- `.just-end`\n- `.just-center`\n- `.just-between`\n- `.just-around`\n\n### [`align-content`](https://www.w3.org/TR/css-flexbox-1/#align-content-property)\n- `.pack-start`\n- `.pack-end`\n- `.pack-center`\n- `.pack-between`\n- `.pack-around`\n- `.pack-stretch`\n\n### [`flex`](https://www.w3.org/TR/css-flexbox-1/#flex-property)\n\n\u003ca name=\"flex-presets\"\u003e\u003c/a\u003e\n\u003ca name=\"flex-shorthand\"\u003e\u003c/a\u003e\n\nShorthand classes supply [common presets](https://www.w3.org/TR/css-flexbox-1/#flex-common)\n\n- `.flex-fade` for `0 1 auto` aka shrinkable\n- `.flex-fame` for `1 0 auto` aka growable\n- `.flex-auto` for `1 1 auto` aka flexible\n- `.flex-none` for `none` aka inflexible\n\nCompose with [`grow`](#flex-grow) [`shrink`](#flex-shrink) [`basis`](#flex-basis)\n\n### [`flex-grow`](https://www.w3.org/TR/css-flexbox-1/#flex-grow-property)\n- `.grow-0`\n- `.grow-1`\n- `.grow-2`\n- `.grow-3`\n- `.grow-4`\n- `.grow-5`\n- `.grow-6`\n- `.grow-8`\n- `.grow-7`\n- `.grow-9`\n- `.grow-10`\n- `.grow-11`\n- `.grow-12`\n\n### [`flex-shrink`](https://www.w3.org/TR/css-flexbox-1/#flex-shrink-property)\n- `.shrink-0`\n- `.shrink-1`\n- `.shrink-2`\n- `.shrink-3`\n- `.shrink-4`\n- `.shrink-5`\n- `.shrink-6`\n- `.shrink-7`\n- `.shrink-8`\n- `.shrink-9`\n- `.shrink-10`\n- `.shrink-11`\n- `.shrink-12`\n\n### [`flex-basis`](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property)\n- `.basis-0` 0/12 grid\n- `.basis-1` 1/12 grid\n- `.basis-2` 2/12 grid\n- `.basis-3` 3/12 grid\n- `.basis-4` 4/12 grid\n- `.basis-5` 5/12 grid\n- `.basis-6` 6/12 grid\n- `.basis-7` 7/12 grid\n- `.basis-8` 8/12 grid\n- `.basis-9` 9/12 grid\n- `.basis-10` 10/12 grid\n- `.basis-11` 11/12 grid\n- `.basis-12` 12/12 grid\n- `.basis-100vw`\n- `.basis-100vh`\n- `.basis-100vmax`\n- `.basis-100vmin`\n- `.basis-golden`\n- `.basis-content`\n- `.basis-auto`\n\n### area\n\u003ca name=\"size-control\"\u003e\u003c/a\u003e\n\nSome [flexbugs](https://github.com/philipwalton/flexbugs) are solvable via min or max width or height\n\n- `.area-min` sets both mins to `0` [re: nesting](https://goo.gl/3IZRMt)\n- `.area-max` sets both maxes to `100%`\n\nConsider [area.css](https://github.com/ryanve/area.css) for more\n\n### `@media`\n\nResponsive [`orientation`](https://drafts.csswg.org/mediaqueries-4/#orientation) classes are available for [`flex-flow`](#flex-flow) and [`display`](#display) classes. Append [`@portrait`](#portrait) or [`@landscape`](#landscape) to these classes to limit them to that orientation. This affords layouts that flow or wrap differently based on viewport orientation or layouts that only flex in one orientation. Try the [#fitting](https://ryanve.github.io/flexboxes/#fitting) example in both portrait and landscape to see how it adapts. You can do this on a phone by rotating the phone or on a computer by resizing the browser window.\n\n```html\nclass=\"flex-block flow-west@portrait flow-north@landscape\"\n```\n\n#### `portrait`\n\n- `flow-east@portrait`\n- `flow-west@portrait`\n- `flow-south@portrait`\n- `flow-north@portrait`\n- `flow-over@portrait`\n- `flow-wrap@portrait`\n- `flow-warp@portrait`\n- `flex-inline@portrait`\n- `flex-block@portrait`\n\n#### `landscape`\n\n- `flow-east@landscape`\n- `flow-west@landscape`\n- `flow-south@landscape`\n- `flow-north@landscape`\n- `flow-over@landscape`\n- `flow-wrap@landscape`\n- `flow-warp@landscape`\n- `flex-inline@landscape`\n- `flex-block@landscape`\n\n## examples\n\n[ryanve.github.io/flexboxes](https://ryanve.github.io/flexboxes)\n","funding_links":["https://github.com/sponsors/ryanve","https://patreon.com/ryanve","https://opencollective.com/ryanve","https://ko-fi.com/ryanve"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Fflexboxes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanve%2Fflexboxes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Fflexboxes/lists"}