{"id":13564605,"url":"https://github.com/Coffcer/flex-layout","last_synced_at":"2025-04-03T21:31:14.745Z","repository":{"id":36509591,"uuid":"40815287","full_name":"Coffcer/flex-layout","owner":"Coffcer","description":" 基于flexbox的栅格化布局库，提供更直观、丰富的布局方式。","archived":false,"fork":false,"pushed_at":"2017-09-04T09:16:14.000Z","size":116,"stargazers_count":300,"open_issues_count":4,"forks_count":94,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-29T02:05:00.567Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://coffcer.github.io/flex-layout/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Coffcer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-16T12:12:10.000Z","updated_at":"2024-09-29T02:09:25.000Z","dependencies_parsed_at":"2022-07-24T18:47:19.623Z","dependency_job_id":null,"html_url":"https://github.com/Coffcer/flex-layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coffcer%2Fflex-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coffcer%2Fflex-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coffcer%2Fflex-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coffcer%2Fflex-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Coffcer","download_url":"https://codeload.github.com/Coffcer/flex-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247083180,"owners_count":20880791,"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":[],"created_at":"2024-08-01T13:01:33.553Z","updated_at":"2025-04-03T21:31:11.764Z","avatar_url":"https://github.com/Coffcer.png","language":"CSS","readme":"#flex-layout\n\n基于flexbox的栅格化布局库，提供更直观、丰富的布局方式。\u003cbr\u003e\n[文档与demo][1]\n\n#npm\n\tnpm install flex-layout\n\n#优势\n\nflex-layout解决了css布局的不少问题:\n\n* 应用一个class就可以垂直居中。\n* 轻松实现多栏同高。\n* 自动计算间距，实现等宽布局，不需要再计算margin。\n* 支持自动填充剩余宽度，以往我们需要通过触发BFC来实现。\n* 支持自动填充剩余高度，比如将footer置于底部。\n* 随意调整[栅格]顺序，比如让main比sidebar提前渲染出来。\n* 丰富的对齐方式：上、下、左、右、左上、右上、左下、右下。\n\n#概述\n\n与传统的栅格化一样，flex-layout基于容器(相当于Bootstrap的row) 和栅格(相当于Bootstrap的column) 来布局:\n\n* [容器]有两种：\nflex-column: 容器里的[栅格]以横向排列，与传统栅格化的row一样\nflex-row: 容器里的[栅格]以竖向排列，就像header、content、footer的排列一样\n\n* 通常，只有[栅格]可以直接放在[容器]中，而你的内容应该放在[栅格]里。但这不是必须的，直接把内容放在[容器]里也没问题。\n* 如果一个[容器]里包含的[栅格]超过24格，多出的部分将另起一行。\n* IE的话只兼容IE10+，其他主流浏览器都支持。\n* Flexbox有主轴，副轴的概念，flex-layout已经封装好了，你不需要懂得flexbox，也无需针对不同轴使用不同的class。不过，如果你对Flexbox有所了解的话，用起来会更顺手。\n* 与Bootstrap等栅格化不同的是：flex-layout不需要container，栅格本身不自带padding。\n\n#License\n\nMIT\n\n[1]: http://coffcer.github.io/flex-layout/","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCoffcer%2Fflex-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCoffcer%2Fflex-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCoffcer%2Fflex-layout/lists"}