移动端全局样式(弹性布局盒子)

如果您是一个优秀的前端开者,您一定会喜欢本款布局盒子。
该盒子是作者集合大量项目得出的使用率最高的盒子布局之一,希望对大家有所帮助。
同时推荐大家在使用本款盒子的同时,使用另一个本人封装的jQuery功能集
下载地址:https://www.jq22.com/jquery-info18675

本示例已经符合大部分布局情况,作者本人也有查阅过其它框架源码,要么就是修改繁琐,布局属性不明确,所以自己手写一个适合自己和广大开发者的基本布局盒子

使用本布局盒子最好搭配 flexible.js 一起使用,写出优秀的移动端布局代码。偷偷告诉你,默认字体大小为0.28rem也就是大部分手机都是14px的大小了;

使用在小程序中的话,将 rem 换算为 rpx 即可,这里不重复写,请使用者自行修改

布局盒子示例


水平分栏 (flex_col)

平均分栏 (flex_col_3)

1
2
3

弹性分栏 (flex_grow)

这是固定盒子
这是弹性盒子

分栏居中对齐 (flex_center)

我被居中了
我被居中了

分栏允许换行 (flex_wrap)

1
2
3
4
5

水平分栏默认垂直居中

单行文本
多行文本
多行文本
我就要居中
我就要居中
我就要居中

垂直分栏 (flex_row)

我是头部1
我是中间弹性
我还能滚动哦!
我是尾部
垂直与水平其它对齐类一致,细微差别请阅读样式源码。