当前位置: 首页 > Web前端 > CSS

构建移动布局框架:集成flex

时间:2023-03-31 12:20:21 CSS

0x001概述flex在移动PC端的兼容性不是很好,但是在移动端的支持很好,flex布局对于移动端布局来说简直就是福音。但是,如果不进行集成和处理,就很难使用flex布局。所以打算自建一套基于flex的移动端布局工具,学习css、sass、flex。0x002containerclass容器工具类这是对flex和flex-direction属性的封装row:把一个元素变成一个水平的flex容器col:把一个元素变成一个垂直的flex容器//主轴居中,横轴居中,变化宽度为100%,主轴居中,横轴居中。flex{显示:flex;证明内容:居中;对齐项目:居中;width:100%;}//水平.row{@extend.flex;flex-direction:row;}//Vertical.col{@extend.flex;弹性方向:列;height:100%;}示例代码结构(去掉style属性,保留structure属性,同下面示例代码):```

col
col
col

```效果:![clipboard.png](/img/bVKslx)内容对齐tool这个是justify-content的包content-start:子元素mainstart对齐content-end:子元素相对于主端对齐content-between:子元素对齐,两端之间没有间距content-around:子元素两端对齐,间距相同。content-start{justify-content:flex-start;}.content-end{justify-content:flex-end;}.content-between{justify-content:space-between;}.content-around{justify-content:space-around;}示例代码结构```//水平对齐
row
row
row
row
row
row
??
row
row
row
/div><div>row
row
row
//纵向对齐
row
row
row
??
row
row
row
row
row
row
```效果:横向对齐效果![剪贴板。png](/img/bVKslS)垂直对齐效果![clipboard.png](/img/bVKsmm)子元素相对于横轴的对齐工具这是一个align-itemscross-start的封装:子元素是相对于横轴对齐crossstartcross-end:子元素相对于横轴对齐crossendcross-stretch:子元素相对于横轴代码拉伸对齐```.cross-开始{对齐项目:弹性开始;}.cross-end{align-items:flex-end;}.cross-stretch{align-items:stretch;}```示例代码```
单元格开始
单元格开始
单元格开始
cell-end
cell-end
cell-end
单元格拉伸
单元格拉伸
单元格拉伸
;
单元格开始
单元格开始
单元格开始
单元格开始
单元格结束
单元格结束
单元格结束
单元格结束
单元格拉伸
单元格拉伸
单元格拉伸
单元格拉伸
```效果![clipboard.png](/img/bVKspG)0x003子元素工具缩放工具这是对flex-growcell-1的封装:scale1cell-2:scale2cell-3:Ratio3cell-4:Ratio4cell-5:Ratio5cell-full:Spacer,让子元素的宽度占100%,主要用于col@for$i从1到5的子元素{.cell-#{$i}{flex-grow:$i;文本对齐:居中;}}.cell-full{width:100%;}示例代码```cell-1cell-1cell-1cell-1cell-5cell-1cell-1cell-2cell-3cell-1cell-1cell-1cell-1cell-2cell-3
col
cell-1
```效果图2.子元素对齐工具这是对`align-items`的封装-`cell-start`:-`cell-end`-`cell-stretch`代码:```.cell-start{align-items:flex-start;}.cell-end{align-items:flex-end;}.cell-stretch{align-items:stretch;}```示范代码```自启动
default
自我结束自我伸展自启动
默认
自结束self-stretch```效果3.滚动这是对`overflow`-`cell-scroll-x`-`的封装cell-scroll-y`代码:```.cell-scroll-y{高度:100%;overflow-y:auto;}.cell-scroll-x{宽度:100%;溢出-x:自动;空白:nowrap;}```示例代码```水平滚动水平滚动水平滚动水平滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动水平滚动
1
2
...
13
14
```效果0x004页面实际登录页面示例代码(省略样式,只保留结构):

login

??效果:个人中心示例代码(省略样式,只保留结构):

十里桃花,不如与你同眠

我的最爱我的偏好我的文章关于效果:首页示例代码

首页

文章标题

文章简介

....
....
....
....
??
主页
推荐
我的
作用:文章详情示例代码结构??返回文章详情评论

相忘于江湖

十里桃花,不如与你同眠

2017-03-09

...
效果0x005源码github地址