資訊專欄INFORMATION COLUMN
摘要：概述在移端的兼容并不是很好但是在移動(dòng)端的支持卻是很好而且布局對(duì)移動(dòng)端布局來說簡(jiǎn)直就是福音但是沒有經(jīng)過整和處理用布局也算是艱難所以打算搭建一套基于的移動(dòng)端布局工具來學(xué)習(xí)容器類容器工具類這是對(duì)和屬性的封裝將一個(gè)元素變成橫向的容器將一個(gè)元素變成
0x001 概述
flex在移pc端的兼容并不是很好,但是在移動(dòng)端的支持卻是很好,而且flex布局對(duì)移動(dòng)端布局來說簡(jiǎn)直就是福音.但是沒有經(jīng)過整和處理,用flex布局也算是艱難,所以打算搭建一套基于flex的移動(dòng)端布局工具,來學(xué)習(xí)css,sass,flex.0x002 容器類
容器工具類
這是對(duì)flex和flex-direction屬性的封裝
row:將一個(gè)元素變成橫向的flex容器
col:將一個(gè)元素變成縱向的flex容器
// 主軸居中,交軸居中,將寬度變?yōu)?00%,主軸居中對(duì)齊,交軸居中對(duì)齊
.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%;
}
示例代碼結(jié)構(gòu)(去除樣式屬性,保留結(jié)構(gòu)屬性,以下示例代碼一樣): ```rowrowrowcolcolcol
``` 效果: 
內(nèi)容對(duì)齊工具
這是對(duì)justify-content的封裝
content-start:子元素main start對(duì)齊
content-end:子元素相對(duì)main end對(duì)齊
content-between:子元素相對(duì)兩端無間距對(duì)齊
content-around:子元素相對(duì)兩端同間距對(duì)齊
.content-start {
justify-content: flex-start;
}
.content-end {
justify-content: flex-end;
}
.content-between {
justify-content: space-between;
}
.content-around {
justify-content: space-around;
}
示例代碼結(jié)構(gòu) ``` //橫向?qū)Rrowrowrowrowrowrowrowrowrow//縱向?qū)Rrowrowrowrowrowrowrowrowrowrowrowrow``` 效果: 橫向?qū)R效果  縱向?qū)R效果 rowrowrow
子元素相對(duì)交軸對(duì)齊工具
這是對(duì)align-items的封裝
cross-start:子元素相對(duì)交軸cross start 對(duì)齊
cross-end:子元素相對(duì)交軸cross end對(duì)齊
cross-stretch:子元素相對(duì)交軸拉伸對(duì)齊
代碼
```
.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 子元素工具
比例工具
這是對(duì)flex-grow的封裝
cell-1:比例1
cell-2:比例2
cell-3:比例3
cell-4:比例4
cell-5:比例5
cell-full:墊片,使子元素寬度占據(jù)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.子元素對(duì)齊工具
這是對(duì)`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.滾動(dòng)
這是對(duì)`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;
}
```
示例代碼
```
橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)橫向滾動(dòng)
1
2
...
13
14
```
效果
0x004 頁面實(shí)戰(zhàn)
登錄頁面
示例代碼(省略樣式,只保留結(jié)構(gòu)):
登錄
效果:
個(gè)人中心
示例代碼(省略樣式,只保留結(jié)構(gòu)):
十里桃花不如睡你
我的收藏我的喜好我的文章關(guān)于
效果:
主頁
示例代碼
