0x001 概述
flex在移pc端的兼容并不是很好,但是在移动端的支持却是很好,而且flex布局对移动端布局来说简直就是福音.但是没有经过整和处理,用flex布局也算是艰难,所以打算搭建一套基于flex的移动端布局工具,来学习css,sass,flex.
0x002 容器类
-
容器工具类
这是对flex和flex-direction属性的封装-
row:将一个元素变成横向的flex容器 -
col:将一个元素变成纵向的flex容器
// 主轴居中,交轴居中,将宽度变为100%,主轴居中对齐,交轴居中对齐.flex { display: flex; justify-content: center; align-items: center; width: 100%;}// 横向.row { @extend .flex; flex-direction: row;}// 纵向.col { @extend .flex; flex-direction: column; height: 100%;} -
示例代码结构(去除样式属性,保留结构属性,以下示例代码一样):```rowrowrow```效果:colcolcol
-
内容对齐工具
这是对justify-content的封装-
content-start:子元素main start对齐 -
content-end:子元素相对main 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;} -
示例代码结构```//横向对齐rowrowrowrowrowrowrowrowrow//纵向对齐rowrowrowrowrowrowrowrowrowrowrowrow```效果:横向对齐效果纵向对齐效果rowrowrow
-
子元素相对交轴对齐工具
这是对align-items的封装-
cross-start:子元素相对交轴cross start对齐 -
cross-end:子元素相对交轴cross end对齐 -
cross-stretch:子元素相对交轴拉伸对齐
-
代码```.cross-start { align-items: flex-start; }.cross-end { align-items: flex-end;}.cross-stretch { align-items: stretch;}```示例代码``` cell-start cell-start cell-start cell-end cell-end cell-end cell-stretch cell-stretch cell-stretch cell-start cell-start cell-start cell-start cell-end cell-end cell-end cell-end cell-stretch cell-stretch cell-stretch cell-stretch ```效果 0x003 子元素工具
-
比例工具
这是对flex-grow的封装-
cell-1:比例1 -
cell-2:比例2 -
cell-3:比例3 -
cell-4:比例4 -
cell-5:比例5 -
cell-full:垫片,使子元素宽度占据100%,主要用于col的子元素
@for $i from 1 through 5 { .cell-#{$i} { flex-grow: $i; text-align: center; }}.cell-full{ width: 100%;} -
示例代码```cell-1cell-1cell-1cell-1cell-5cell-1cell-1cell-2cell-3```效果图cell-1cell-1cell-1cell-1cell-2cell-3colcell-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;}```示例代码``` self-start default self-end self-stretch self-start default self-end self-stretch ```效果 
3.滚动
这是对`overflow`的封装- `cell-scroll-x`- `cell-scroll-y`代码:```.cell-scroll-y { height: 100%; overflow-y: auto;}.cell-scroll-x { width: 100%; overflow-x: auto; white-space: nowrap;}```示例代码``` 横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动 1 2 ... 13 14 ```效果 
0x004 页面实战
-
登录页面
示例代码(省略样式,只保留结构):登录
效果:
-
个人中心
示例代码(省略样式,只保留结构):
十里桃花不如睡你
我的收藏我的喜好我的文章关于效果:
-
主页
示例代码主页
文章标题
文章简介
................主页推荐我的效果:
-
文章详情
示例代码结构返回文章详情评论相忘于江湖
十里桃花不如睡你
2017-03-09
...效果
