{"id":19739526,"url":"https://github.com/suitcss/utils-flex","last_synced_at":"2025-02-27T22:27:47.254Z","repository":{"id":2316956,"uuid":"46227074","full_name":"suitcss/utils-flex","owner":"suitcss","description":"CSS flexbox utilities","archived":false,"fork":false,"pushed_at":"2023-04-16T20:54:29.000Z","size":221,"stargazers_count":62,"open_issues_count":3,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-14T02:52:12.660Z","etag":null,"topics":["flexbox","suit-css"],"latest_commit_sha":null,"homepage":"http://suitcss.github.io/utils-flex/test/","language":"HTML","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/suitcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-15T17:06:07.000Z","updated_at":"2023-06-15T00:54:52.000Z","dependencies_parsed_at":"2023-07-06T18:01:23.198Z","dependency_job_id":null,"html_url":"https://github.com/suitcss/utils-flex","commit_stats":{"total_commits":64,"total_committers":5,"mean_commits":12.8,"dds":0.328125,"last_synced_commit":"0e84919025dff38cefe26a944c10de5cd246b321"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Futils-flex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Futils-flex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Futils-flex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Futils-flex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suitcss","download_url":"https://codeload.github.com/suitcss/utils-flex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241068222,"owners_count":19903985,"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":["flexbox","suit-css"],"created_at":"2024-11-12T01:17:35.165Z","updated_at":"2025-02-27T22:27:47.228Z","avatar_url":"https://github.com/suitcss.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SUIT CSS utilities: flex\n\n[![Build Status](https://travis-ci.org/suitcss/utils-flex.svg?branch=master)](https://travis-ci.org/suitcss/utils-flex)\n\nSUIT CSS flexbox utilities\n\n* Read more about [flexbox and its usage](http://www.w3.org/TR/css-flexbox/)\n* Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).\n\n## Installation\n\n* [npm](http://npmjs.org/): `npm install suitcss-utils-flex`\n* Download: [zip](https://github.com/suitcss/utils-flex/releases/latest)\n\n## Available classes\n\n**`flex-container`**\n\n* `u-flex` - Create a flex container\n* `u-flexInline` - Create an inline flex container\n\n**`flex-direction`**\n\n* `u-flexRow` - Displays items in a row\n* `u-flexRowReverse` - Reverses items in a row\n* `u-flexCol` - Display items in a column\n* `u-flexColReverse` - Reverses items in a column\n\n**`flex-wrap`**\n\n* `u-flexWrap` - Wrap items onto another line when space allows\n* `u-flexNoWrap` - Force items to stay on one line\n* `u-flexWrapReverse` - Wrap items and reverse direction\n\n**`justify-content`**\n\n* `u-flexJustifyStart` - Align items at the start of the main axis\n* `u-flexJustifyEnd` - Align items at the end of the main axis\n* `u-flexJustifyCenter` - Align items at the center of the main axis\n* `u-flexJustifyBetween` - Items have space between each other on main axis\n* `u-flexJustifyAround` - Items have space around each other on main axis\n\n**`align-items`**\n\n* `u-flexAlignItemsStretch` - Items stretch to fill container\n* `u-flexAlignItemsStart` - Cross-start margin edge of the items is placed on the cross-start line\n* `u-flexAlignItemsEnd` - Cross-end margin edge of the items is placed on the cross-end line\n* `u-flexAlignItemsCenter` - Items are centered in the cross-axis\n* `u-flexAlignItemsBaseline` - Items have their baselines aligned on the cross axis\n\n**`align-content`**\n\n* `u-flexAlignContentStart` - Items are packed to the start of the container\n* `u-flexAlignContentEnd` - Items are packed to the end of the container\n* `u-flexAlignContentCenter` - Items are packed to the centre of the container\n* `u-flexAlignContentStretch` - Lines stretch to take up the remaining space\n* `u-flexAlignContentBetween` - Lines evenly distributed; first and last lines at container edge\n* `u-flexAlignContentAround` - Lines evenly distributed with equal space around each line\n\n**`align-self`**\n\n* `u-flexAlignSelfStart` - Aligns single item at cross axis start\n* `u-flexAlignSelfEnd` - Aligns single item at cross axis end\n* `u-flexAlignSelfCenter` - Aligns single item at cross axis centre-\n* `u-flexAlignSelfStretch` - Stretches single item from cross start to end\n* `u-flexAlignSelfAuto` - Uses the default set by `align-items`\n\n**`order`**\n\n* `u-flexOrderFirst` - Positions an item at the start\n* `u-flexOrderLast` - Positions an item at the end\n* `u-flexOrderNone` - Sets item order to the default of `0`\n\n**`flex-grow`**\n\n* `u-flexGrowX` - Specify how much the flex item will grow relatively\n\n`X` can be any of the following numbers: `1`, `2`, `3`, `4`, `5`.\n\n**`flex-shrink`**\n\n* `u-flexShrinkX` - Specify how much the flex item will shrink relatively\n\n`X` can be any of the following numbers: `0`, `1`, `2`, `3`, `4`, `5`.\n\n**`flex-basis`**\n\nUsed to override other utilities and tweak [how space is\ndistributed](https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg).\n\n* `u-flexBasisAuto`\n* `u-flexBasis0`\n\n**`flex` shorthand**\n\n* `u-flexInitial` - Sizes the item based on the width/height properties\n* `u-flexAuto` - Sizes the item based on the width/height properties, but makes\n  them fully flexible, so that they absorb any free space along the main axis.\n* `u-flexNone` - Sizes the item according to the width/height properties, but\n  makes the flex item fully inflexible. Similar to initial, except that flex\n  items are not allowed to shrink, even in overflow situations.\n\n**Aligning with `auto` margins**\n\n* `u-flexExpand` - Expand all margins to fill remaining space\n* `u-flexExpandTop` - Expand top margin to fill remaining space\n* `u-flexExpandRight` - Expand right margin to fill remaining space\n* `u-flexExpandBottom` - Expand bottom margin to fill remaining space\n* `u-flexExpandLeft` - Expand left margin to fill remaining space\n\n[Read more](https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6) about how this works.\n\n### Plugins\n\nAll flex utilities can be limited to specific Media Query breakpoints.\n\n* `u-sm-flexX` - To use at the smallest Media Query breakpoint.\n* `u-md-flexX` - To use at the medium Media Query breakpoint.\n* `u-lg-flexX` - To use at the largest Media Query breakpoint.\n\n``` html\n\u003cdiv class=\"u-md-flex u-md-flexWrap\"\u003e\n  \u003c!-- flex items --\u003e\n\u003c/div\u003e\n```\n\n### Configuration\n\nThere are 3 Media Query breakpoints:\n\n* `--sm-viewport`\n* `--md-viewport`\n* `--lg-viewport`\n\nWhen using [postcss-custom-media](https://github.com/postcss/postcss-custom-media),\nbreakpoints can be configured using `@custom-media`. For example:\n\n```css\n@custom-media --sm-viewport (min-width:320px) and (max-width:640px);\n@custom-media --md-viewport (min-width:640px) and (max-width:960px);\n@custom-media --lg-viewport (min-width:960px);\n```\n\n## Usage\n\n### Centring an element in its container\n\n``` html\n\u003cdiv class=\"u-flex u-flexAlignItemsCenter u-flexJustifyCenter\"\u003e\n  \u003cp\u003eSome centred content\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Usage with [`Grid`](https://github.com/suitcss/components-grid)\n\nNote: The `Grid` component already sets `display: flex` on the root element.\n\n``` html\n\u003cdiv class=\"Grid Grid--alignBottom\"\u003e\n  \u003cdiv class=\"Grid-cell u-size1of3 u-md-flexAlignSelfCenter\"\u003eContent\u003c/div\u003e\n  \u003cdiv class=\"Grid-cell u-size1of3\"\u003eContent\u003c/div\u003e\n  \u003cdiv class=\"Grid-cell u-size1of3\"\u003eContent\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Usage with [`utils-size`](https://github.com/suitcss/utils-size)\n\n``` html\n\u003cdiv class=\"u-flex u-flexJustifyEnd\"\u003e\n  \u003cdiv class=\"u-size4of12\"\u003eContent\u003c/div\u003e\n  \u003cdiv class=\"u-size2of12\"\u003eContent\u003c/div\u003e\n  \u003cdiv\u003eContent\u003c/div\u003e\n\u003c/div\u003e\n```\n\n``` html\n\u003cdiv class=\"u-flex u-flexAlignItemsCenter\"\u003e\n  \u003cdiv class=\"u-size1of4\"\u003eContent\u003c/div\u003e\n  \u003cdiv class=\"u-size1of4\"\u003eContent\u003c/div\u003e\n  \u003cdiv class=\"u-sizeFill\"\u003eContent\u003c/div\u003e\n\u003c/div\u003e\n```\n\nPlease refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)\n\n## Setting `flex-shrink` in IE10\n\nIn IE10 it is required to [explicitly set `flex-shrink` on flex\nitems](https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed),\nor use the longhand `flex` declaration.\n\nIn prior versions of `utils-flex` this was set automatically on all flex items.\nDue to issues with specificity this has been removed.\n\nShould you need to apply the fix for IE10 then add a `u-flexShrink` class\nmanually:\n\n```html\n\u003cdiv class=\"u-flex u-flexNoWrap\"\u003e\n  \u003cdiv class=\"FlexItem u-flexShrink1\"\u003eContent\u003c/div\u003e\n  \u003cdiv class=\"FlexItem u-flexShrink1\"\u003eContent\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Testing\n\nInstall [Node](http://nodejs.org) (comes with npm).\n\n```\nnpm install\n```\n\nTo generate a build:\n\n```\nnpm run build\n```\n\nTo lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)\n\n```\nnpm run lint\n```\n\nTo generate the testing build.\n\n```\nnpm run build-test\n```\n\nTo watch the files for making changes to test:\n\n```\nnpm run watch\n```\n\nBasic visual tests are in `test/index.html`.\n\n## Browser support\n\nRefer to the [caniuse](http://caniuse.com/) page for [flexbox](http://caniuse.com/#feat=flexbox).\n\n* Google Chrome (latest)\n* Opera (latest)\n* Firefox 28+\n* Safari 6.1+\n* Internet Explorer 10+\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuitcss%2Futils-flex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuitcss%2Futils-flex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuitcss%2Futils-flex/lists"}