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

时间  2019-12-04
标签 搭建 移动 布局 框架 整合 flex 栏目 无线 繁體版
原文   原文链接

0x001 概述

flex在移pc端的兼容并非很好,可是在移动端的支持倒是很好,并且 flex布局对移动端布局来讲简直就是福音.可是没有通过整和处理,用 flex布局也算是艰难,因此打算搭建一套基于 flex的移动端布局工具,来学习 css, sass, flex.

0x002 容器类

  1. 容器工具类
    这是对flex和flex-direction属性的封装css

    • 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的封装git

    • 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的封装github

    • 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的封装sass

    • 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>
```
效果图

clipboard.png

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>
```
效果

clipboard.png

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>
```
效果

clipboard.png

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

    clipboard.png

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

    <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>

    效果:code

clipboard.png

  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>

    效果:

clipboard.png

  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>

    效果

clipboard.png

0x005 源码

github地址

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程