{"id":20739458,"url":"https://github.com/vxhly/scss-flex","last_synced_at":"2025-04-24T02:24:07.570Z","repository":{"id":49930893,"uuid":"86126732","full_name":"vxhly/scss-flex","owner":"vxhly","description":"flexbox 布局神器，使用 SASS 语法编写，使用 webpack 前端打包工具进行打包","archived":false,"fork":false,"pushed_at":"2021-06-08T07:52:58.000Z","size":760,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T16:12:40.088Z","etag":null,"topics":["css","css-flexbox","flex-sass","flex-scss","flexbox","gulp","sass","sass-flex","scss","scss-flex"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/vxhly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-03-25T02:31:56.000Z","updated_at":"2024-01-02T02:55:16.000Z","dependencies_parsed_at":"2022-08-31T00:01:20.468Z","dependency_job_id":null,"html_url":"https://github.com/vxhly/scss-flex","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vxhly%2Fscss-flex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vxhly%2Fscss-flex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vxhly%2Fscss-flex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vxhly%2Fscss-flex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vxhly","download_url":"https://codeload.github.com/vxhly/scss-flex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250546692,"owners_count":21448380,"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","css-flexbox","flex-sass","flex-scss","flexbox","gulp","sass","sass-flex","scss","scss-flex"],"created_at":"2024-11-17T06:25:01.409Z","updated_at":"2025-04-24T02:24:07.553Z","avatar_url":"https://github.com/vxhly.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# scss-flex\n\n[![NPM version](https://img.shields.io/npm/v/scss-flex.svg?style=flat-square)](https://vxhly.github.io/2016/08/flexbox-layout/) [![Build Status](https://travis-ci.org/vxhly/scss-flex.svg?branch=master)](https://travis-ci.org/vxhly/scss-flex) [![GitHub forks](https://img.shields.io/github/forks/vxhly/scss-flex.svg)](https://github.com/vxhly/scss-flex/network) [![GitHub stars](https://img.shields.io/github/stars/vxhly/scss-flex.svg)](https://github.com/vxhly/scss-flex/stargazers) [![NPM download](https://img.shields.io/npm/dm/scss-flex.svg?style=flat-square)](https://npmjs.org/package/scss-flex) [![GitHub license](https://img.shields.io/github/license/vxhly/scss-flex.svg)](https://github.com/vxhly/scss-flex/blob/master/LICENSE)\n\n\u003e flexbox，移动端 flex 布局神器，兼容微信，UC，webview 等移动端主流浏览器，可以通过 bower 和 npm 下载\n\n## 参考\n\n\u003e \u003chttps://github.com/lzxb/flex.css\u003e\n\n\u003e 使用 SASS 语法编写，使用 gulp 前端打包工具进行打包\n\n\u003e 针对 flexbox 布局方式的详细介绍：[Flex 布局](https://vxhly.github.io/2016/08/11/flexbox-layout/)\n\n## download\n\n```bash\ngit clone https://github.com/vxhly/scss-flex.git\n```\n\n### npm\n\n```bash\nnpm install scss-flex --save\n```\n\n### bower\n\n```bash\nbower install scss-flex --save\n```\n\n### use\n\n```bash\n\u003clink href=\"./scss-flex.min.css\"\u003e\n\n# or\n\nimport 'scss-flex/src/scss-flex.scss'\n```\n\n## 为什么需要 flex.css?\n\n```\n在移动端开发中，并不是所有的浏览器，webview，微信等各种版本都支持标准的 flex，\n但是基本上都会支持 -webkit-box，所以 scss-flex.css 的主要作用是保证每一个属性都能支持标准 flex 或旧版本的 -webkit-box。\n由于 flex.css 采用了 autoprefixer 编译，所以能够保证在浏览器不支持标准 flex 布局的情况下，\n回滚到旧版本的 -webkit-box，保证移动设备中能呈现出一样的布局效果。\n于是，一款移动端快速布局的神器诞生了...\n```\n\n## support\n\n```\nflex 布局分为旧版本 `dispaly: box`;过渡版本 `dispaly: flexbox`;以及现在的标准版本 `display: flex`;\n\nAndroid\n  2.3 开始就支持旧版本 `display:-webkit-box`;\n  4.4 开始支持标准版本 `display: flex`;\n\nIOS\n  6.1 开始支持旧版本 `display:-webkit-box`;\n  7.1 开始支持标准版本 `display: flex`;\n\nPC\n  如果你不需要兼容 ie10 以下版本，也是可以使用 scss-flex.css\n\nflex.css同时能兼容新版本和旧版本，保证了浏览器不支持新版本时，回退到旧版本。\n```\n\n![support](https://github.com/vxhly/scss-flex/blob/master/img/caniuse.png)\n\n## use\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./dist/css/scss-flex.css\"\u003e\n\n\u003c!-- flex 属性匹配，简单的子元素居中例子： --\u003e\n\u003cdiv flex=\"main:center cross:center\" style=\"width:500px; height: 500px; background: #108423\"\u003e\n  \u003cdiv style=\"background: #fff\"\u003e看看我是不是居中的\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## flex 属性大全\n\n\u003e 以下属性具体解释请移步 [Flex 布局](https://vxhly.github.io/2016/08/flexbox-layout/) 或者 [Flex 布局](https://github.com/vxhly/scss-flex/wiki/Flexbox-%E5%B8%83%E5%B1%80)\n\n```bash\ndir：主轴方向\n    top：从上到下\n    right：从右到左\n    bottom：从下到上\n    left：从左到右（默认）\n\nwrap: 换行方式\n    nowrap：不换行（默认）\n    wrap：换行，第一行在上方\n    reverse：换行，第一行在下方\n\nflow: 布局方式\n    left-nowrap: 从左到右且不换行(默认)\n    left-wrap: 从左到右且换行，第一行在上方\n    left-reverse: 从左到右且换行，第一行在下方\n    right-nowrap: 从右到左且不换行\n    right-wrap: 从右到左且换行，第一行在上方\n    right-reverse: 从右到左且换行，第一行在下方\n    top-nowrap: 从上到下且不换行\n    top-wrap: 从上到下且换行，第一行在上方\n    top-reverse: 从上到下且换行，第一行在下方\n    bottom-nowrap: 从下到上且不换行\n    bottom-wrap: 从下到上且换行，第一行在上方\n    bottom-reverse: 从下到上且换行，第一行在下方\n\nmain：主轴对齐方式\n    right：从右到左\n    left：从左到右（默认）\n    between：两端对齐\n    around: 分散对齐\n    center：居中对齐\n\ncross：交叉轴对齐方式\n    top：从上到下（默认）\n    bottom：从上到下\n    baseline：基线对齐\n    center：居中对齐\n    stretch：高度并排铺满\n\nmain-cross: 主轴交叉轴对齐方式\n    center: 居中\n\ncontent: 多根轴线的对齐方式\n    stretch: 轴线占满整个交叉轴（默认）\n    start: 与交叉轴的起点对齐\n    end: 与交叉轴的终点对齐\n    center: 与交叉轴的中点对齐\n    between: 与交叉轴两端对齐，轴线之间的间隔平均分布\n    around: 每根轴线两侧的间隔都相等\n\nbox：子元素设置\n    mean：子元素平分空间\n    first：第一个子元素不要多余空间，其他子元素平分多余空间\n    last：最后一个子元素不要多余空间，其他子元素平分多余空间\n    justify：两端第一个元素不要多余空间，其他子元素平分多余空间\n\n# 以下属性需要写在子项目的 HTML 元素上\n\nitem: 允许单个项目有与其他项目不一样的对齐方式\n    auto: 继承父元素的 align-items 属性（默认）\n    start: 居于轴顶部对齐\n    end: 居于轴尾部对齐\n    center：居于轴中心对齐\n    baseline：居于基线对齐\n    stretch：充满整个轴\n\norder: 定义项目的排列顺序。数值越小，排列越靠前，默认为0\n    0~12\n    -1~-12\n\nflex-box: 自定义项目的放大或者缩小比例\n    0~10\n```\n\n## flex-box 属性说明\n\n```\n取值范围(`0-10`)，单独设置子元素多余空间的如何分配，设置为 0，则子元素不占用多余的多余空间\n多余空间分配 = 当前 flex-box 值/子元素的 flex-box 值相加之和\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvxhly%2Fscss-flex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvxhly%2Fscss-flex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvxhly%2Fscss-flex/lists"}