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

头像
followWinter
    阅读 11 分钟
    2

    0x001 概述

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

    0x002 容器类

    1. 容器工具类
      这是对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%;
}

    示例代码结构(去除样式属性,保留结构属性,以下示例代码一样):
```
<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>
```
效果图

    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>

      效果:

      clipboard.png

    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>

      效果:

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

    csssassflex
    followWinter
    1.5k 声望82 粉丝

    暂时没有

    « 上一篇
    搭建移动端布局框架:重拾flex
    下一篇 »
    npm入手笔记0x001-项目初始化和包增删改

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    活用 Git 撤销，提升工程质量（文末招聘）

    followWinter阅读 1.6k

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 8阅读 1.6k评论 2

    头像
    纯CSS实现有趣emoji切换开关

    南城FE阅读 4k

    头像
    那些年我用过的SAP IDE

    注销阅读 3k

    头像
    SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版

    注销阅读 1.4k

    0 条评论
    得票最新