搭建移动端布局框架:整合flex

0x001 概述

flex在移pc端的兼容并不是很好,但是在移动端的支持却是很好,而且
flex布局对移动端布局来说简直就是福音.但是没有经过整和处理,用
flex布局也算是艰难,所以打算搭建一套基于
flex的移动端布局工具,来学习
css,
sass,
flex.

0x002 容器类

  1. 容器工具类
    这是对flexflex-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%;
    }
    
示例代码结构(去除样式属性,保留结构属性,以下示例代码一样):
```
<div class="page">
    <div class="row" >
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>

<div class="page">
    <div class="co">
        <div>col</div>
        <div>col</div>
        <div>col</div>
    </div>
</div>
<br>
```
效果:



![clipboard.png](/img/bVKslx)
  1. 内容对齐工具
    这是对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;
    }
示例代码结构
```
//横向对齐
<div class="page-small">
    <div class="row content-start">
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>
<div class="page-small">
    <div class="row content-end">
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>
<div class="page-small">
    <div class="row  content-around">
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>
<div class="page-small">
    <div class="row  content-between">
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>

//纵向对齐
<div class="page-small">
    <div class="col  content-start">
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>
<div class="page-small">
    <div class="col  content-end">
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>
<div class="page-small">
    <div class="col  content-around">
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>
<div class="page-small">
    <div class="col  content-between">
        <div>row</div>
        <div>row</div>
        <div>row</div>
    </div>
</div>
```
效果:
横向对齐效果
![clipboard.png](/img/bVKslS)
纵向对齐效果
![clipboard.png](/img/bVKsmm)
  1. 子元素相对交轴对齐工具
    这是对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;
}
```
示例代码
```
<div class="page-small">
    <div class="row cross-start">
        <div>cell-start</div>
        <div>cell-start</div>
        <div>cell-start</div>
    </div>
</div>
<div class="page-small">
    <div class="row cross-end">
        <div>cell-end</div>
        <div>cell-end</div>
        <div>cell-end</div>
    </div>

</div>
<div class="page-small">
    <div class="row cross-stretch">
        <div>cell-stretch</div>
        <div>cell-stretch</div>
        <div>cell-stretch</div>
    </div>
</div>
<div class="page-small">
    <div class="col cross-start">
        <div>cell-start</div>
        <div>cell-start</div>
        <div>cell-start</div>
        <div>cell-start</div>
    </div>
</div>
<div class="page-small">
    <div class="col cross-end">
        <div>cell-end</div>
        <div>cell-end</div>
        <div>cell-end</div>
        <div>cell-end</div>
    </div>
</div>
<div class="page-small">
    <div class="col cross-stretch">
        <div>cell-stretch</div>
        <div>cell-stretch</div>
        <div>cell-stretch</div>
        <div>cell-stretch</div>
    </div>
</div>
```
效果
![clipboard.png](/img/bVKspG)

0x003 子元素工具

  1. 比例工具
    这是对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%;
    }
示例代码
```
<div class="page-small">
    <div class="row">
        <div class="cell-1">cell-1</div>
        <div class="cell-1">cell-1</div>
        <div class="cell-1">cell-1</div>
    </div>
    <div class="row">
        <div class="cell-1">cell-1</div>
        <div class="cell-5">cell-5</div>
        <div class="cell-1">cell-1</div>
    </div>

    <div class="row">
        <div class="cell-1">cell-1</div>
        <div class="cell-2">cell-2</div>
        <div class="cell-3">cell-3</div>
    </div>
</div>
<div class="page-small">
    <div style="width: 30px;height:100%;display: inline-block;vertical-align: top">
        <div class="col" >
            <div class="cell-1">cell-1</div>
            <div class="cell-1">cell-1</div>
            <div class="cell-1">cell-1</div>
        </div>
    </div>

    <div style="width: 30px;height:100%;display: inline-block;vertical-align: top">
        <div class="col  " >
            <div class="cell-1">cell-1</div>
            <div class="cell-2">cell-2</div>
            <div class="cell-3">cell-3</div>
        </div>
    </div>

    <div style="width: 30px;height:100%;display: inline-block;vertical-align: top">
        <div class="col " >
            <div>col</div>
            <div class="cell-1">cell-1</div>
            <div></div>
        </div>
    </div>
</div>
```
效果图

《搭建移动端布局框架:整合flex》

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;
}
```
示例代码
```
<div class="page-small">
    <div class="row">
        <div class="self-start">self-start</div>
        <div>default</div>
        <div class="self-end">self-end</div>
        <div class="self-stretch">self-stretch</div>
    </div>
</div>
<div class="page-small">
    <div class="col full">
        <div class="self-start">self-start</div>
        <div>default</div>
        <div class="self-end">self-end</div>
        <div class="self-stretch">self-stretch</div>
    </div>
</div>
```
效果

《搭建移动端布局框架:整合flex》

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;
}
```
示例代码
```
<div class="page-small">
    <div class="row ">
        <div class="cell-scroll-x">横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动</div>
    </div>

</div>
<div class="page-small">
    <div class="col full">
        <div class="cell-scroll-y">
            <div>1</div>
            <div>2</div>
            ...
            <div>13</div>
            <div>14</div>
        </div>
    </div>
</div>
```
效果

《搭建移动端布局框架:整合flex》

0x004 页面实战

  1. 登录页面
    示例代码(省略样式,只保留结构):

    <div class="page page-login ">
        <div class="col">
            <h1>登录</h1>
            <input type="text" placeholder="账户">
            <input type="password" placeholder="密码">
            <div class="row content-around">
                <button>登录</button>
                <button>注册</button>
            </div>
        </div>
    </div>

    效果:

    《搭建移动端布局框架:整合flex》

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

    <div class="page page-person-info">
        <div class="col container-full">
            <div class="cell-1 col">
                <img src="icon.jpg">
                <p>十里桃花不如睡你</p>
            </div>
            <div class="cell-4 col content-start">
                <div class="cell-full">
                    我的收藏
                </div>
                <div class="cell-full">
                    我的喜好
                </div>
                <div class="cell-full">
                    我的文章
                </div>
                <div class="cell-full">
                    关于
                </div>
            </div>
        </div>
    </div>

    效果:

《搭建移动端布局框架:整合flex》

  1. 主页
    示例代码

    <div class="page">
        <div class="col">
            <div class="row cell-full">
                <p>主页</p>
            </div>
            <div class="cell-5 cell-full cell-scroll-y">
                <divclass="cell-full">
                    <img src="./banner.jpg" alt="" width="100%">
                </div>
                <div class="cell-full">
                    <div class="row >
                        <div class="cell-1 col ">
                            <img src="./icon.jpg" alt="" width="50px">
                        </div>
                        <div class="cell-3">
                            <p>文章标题</p>
                            <p>文章简介</p>
                        </div>
                    </div>
                    <!--文章-->
                   <div>....</div>
                   <div>....</div>
                   <div>....</div>
                   <div>....</div>
                </div>
            </div>
            <div class=" cell-full row content-around">
                <div>主页</div>
                <div>推荐</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    效果:

《搭建移动端布局框架:整合flex》

  1. 文章详情
    示例代码结构

    <div class="page">
        <div class="col container-full">
            <div class="row cell-full content-around">
                <div class="cell-1">返回</div>
                <div class="cell-2">文章详情</div>
                <div class="cell-1">评论</div>
            </div>
            <div class="cell-full cell-scroll-y">
                <h3 >相忘于江湖</h3>
                <div class="row content-between">
                    <p>十里桃花不如睡你</p>
                    <p>2017-03-09</p>
                </div>
                <div>
                    ...
                </div>
            </div>
        </div>
    </div>

    效果

《搭建移动端布局框架:整合flex》

0x005 源码

github地址

    原文作者:followWinter
    原文地址: https://segmentfault.com/a/1190000008653324
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞