摘要：概述在移端的兼容并不是很好但是在移动端的支持却是很好而且布局对移动端布局来说简直就是福音但是没有经过整和处理用布局也算是艰难所以打算搭建一套基于的移动端布局工具来学习容器类容器工具类这是对和属性的封装将一个元素变成横向的容器将一个元素变成
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%;
}
示例代码结构(去除样式属性,保留结构属性,以下示例代码一样): ```rowrowrowcolcolcol
``` 效果: 
内容对齐工具
这是对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 页面实战
登录页面
示例代码(省略样式,只保留结构):
登录
效果:
个人中心
示例代码(省略样式,只保留结构):
十里桃花不如睡你
我的收藏我的喜好我的文章关于
效果:
主页
示例代码
