flex-layout 基于flexbox的栅格化布局库

开源项目 coffce 发表于 1 年前最后回复来自 jf111222888 1 月前

flex-layout

flex-layout是一个基于css3 flexbox的栅格化布局库,提供更直观、丰富的布局方式,可以轻松解决垂直居中,多栏同高等问题。

项目地址: https://github.com/coffcer/flex-layout
文档与demo:http://coffcer.github.io/flex-layout

为什么使用?

与传统的栅格化相比,flex-layout解决了css布局的不少问题:

  • 应用一个class就可以垂直居中。
  • 轻松实现多栏同高。
  • 自动计算间距,实现等宽布局,不需要再计算margin。
  • 支持自动填充剩余宽度,以往我们需要通过触发BFC来实现。
  • 支持自动填充剩余高度,比如将footer置于底部。
  • 随意调整[栅格]顺序,比如让main比sidebar提前渲染出来。
  • 丰富的对齐方式:上、下、左、右、左上、右上、左下、右下。

概述

与传统的栅格化一样,flex-layout基于容器(相当于Bootstrap的row) 和栅格(相当于Bootstrap的column) 来布局:

  • [容器]有两种:
    flex-column: 容器里的[栅格]以横向排列,与传统栅格化的row一样
    flex-row: 容器里的[栅格]以竖向排列,就像header、content、footer的排列一样

  • 通常,只有[栅格]可以直接放在[容器]中,而你的内容应该放在[栅格]里。但这不是必须的,直接把内容放在[容器]里也没问题。

  • 如果一个[容器]里包含的[栅格]超过24格,多出的部分将另起一行。
  • Flexbox有主轴,副轴的概念,flex-layout已经封装好了,你不需要懂得flexbox,也无需针对不同轴使用不同的class。不过,如果你对Flexbox有所了解的话,用起来会更顺手。
  • 与Bootstrap等栅格化不同的是:flex-layout不需要container,栅格本身不自带padding。

具体看文档 http://coffcer.github.io/flex-layout

兼容性

由于使用flexbox,IE系列只兼容IE10+,其他主流浏览器基本兼容。

共收到1条回复
jf111222888 1 月前 #1

尊敬的大V,您好,我们诚邀您参与微软云时代开发者调研活动。您的反馈对于微软至关重要,可以帮助我们为开发者社区提供更多有针对性的内容和云资源支持。为了感谢您的参与,我们将在完成调研的用户中抽取幸运者送出包括价值5000元的Azure云服务账户充值卡、蓝牙耳机等在内的丰富礼品。 调研链接:https://sojump.com/jq/14366726.aspx?udsid=846701

登录后即可参与回复