摘要：概述在移端的兼容并不是很好但是在移動端的支持卻是很好而且布局對移動端布局來說簡直就是福音但是沒有經過整和處理用布局也算是艱難所以打算搭建一套基于的移動端布局工具來學習容器類容器工具類這是對和屬性的封裝將一個元素變成橫向的容器將一個元素變成

flex在移pc端的兼容并不是很好,但是在移動端的支持卻是很好,而且flex布局對移動端布局來說簡直就是福音.但是沒有經過整和處理,用flex布局也算是艱難,所以打算搭建一套基于flex的移動端布局工具,來學習css,sass,flex.

容器工具類
這是對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%;
}

示例代碼結構(去除樣式屬性,保留結構屬性,以下示例代碼一樣):
```

    

        
row
        
row
        
row
    



    

        
col
        
col
        
col
    



```
效果:



![clipboard.png](/img/bVKslx)

內容對齊工具
這是對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;
}

示例代碼結構
```
//橫向對齊

    

        
row
        
row
        
row
    


    

        
row
        
row
        
row
    


    

        
row
        
row
        
row
    


    

        
row
        
row
        
row
    


//縱向對齊

    

        
row
        
row
        
row
    


    

        
row
        
row
        
row
    


    

        
row
        
row
        
row
    


    

        
row
        
row
        
row
    

```
效果:
橫向對齊效果
![clipboard.png](/img/bVKslS)
縱向對齊效果
![clipboard.png](/img/bVKsmm)

子元素相對交軸對齊工具
這是對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
    

```
效果
![clipboard.png](/img/bVKspG)

比例工具
這是對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-1
        
cell-1
        
cell-1
    
    

        
cell-1
        
cell-5
        
cell-1
    

    

        
cell-1
        
cell-2
        
cell-3
    


    

        

            
cell-1
            
cell-1
            
cell-1
        
    

    

        

            
cell-1
            
cell-2
            
cell-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;
}
```
示例代碼
```

    

        
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
        
    

```
效果

登錄頁面
示例代碼(省略樣式,只保留結構):

    

        
登錄
        
        
        

            登錄
            注冊
        
    

效果:

個人中心
示例代碼(省略樣式,只保留結構):

    

        

            
            
十里桃花不如睡你
        
        

            

                我的收藏
            
            

                我的喜好
            
            

                我的文章
            
            

                關于
            
        
    

效果:

主頁
示例代碼

    

        

            
主頁
        
        

            
                
            
            

                

                        
                    
                    

                        
文章標題
                        
文章簡介
                    
                
                
               
....
               
....
               
....
               
....
            
        
        

            
主頁
            
推薦
            
我的