第二周

2. flex弹性布局

作图工具https://www.processon.com/

2.1 了解弹性布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，可以轻松的控制元素排列、对齐和顺序的控制。

现在的终端类型非常多，使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。

主轴，交叉轴

justify-content主轴的对齐方式

align-items交叉轴的对齐方式

声明定义

容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。

声明块级弹性盒子

display:flex

声明内联级弹性盒子

display:inline-flex

flex-direction

用于控制盒子元素排列的方向。

值	描述
row	从左到右水平排列元素（默认值）
row-reverse	从右向左排列元素
column	从上到下垂直排列元素
column-reverse	从下到上垂直排列元素

flex-wrap

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

选项	说明
nowrap	元素不拆行或不拆列（默认值）
wrap	容器元素在必要的时候拆行或拆列。
wrap-reverse	容器元素在必要的时候拆行或拆列，但是以相反的顺序

行元素换行

水平排列反向换行

垂直元素换行

垂直元素反向换行

flex-flow

flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。

justify-content

用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。

选项	说明
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始
space-between	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	元素间距离平均分配

水平排列元素，并使用 justify-content: flex-end 对齐到主轴终点

使用 space-evenly 平均分配容器元素

align-items

用于控制容器元素在交叉轴上的排列方式。

选项	说明
stretch	元素被拉伸以适应容器（默认值）
center	元素位于容器的中心
flex-start	元素位于容器的交叉轴开头
flex-end	元素位于容器的交叉轴结尾

拉伸适应交叉轴

如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch 的结果，因为 stretch 优先级你于宽高设置。

对齐到交叉轴的顶部

对齐到交叉轴底部

对齐到交叉轴中心

纵向排列时交叉轴排列

align-content

只适用于多行显示的弹性容器，它的作用是当flex容器在交叉轴上有多余的空间时，对元素的对齐处理。

选项	说明
stretch	将空间平均分配给元素
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始
space-between	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	元素间距离平均分配

水平排列在交叉轴中居中排列

align-self

用于控制单个元素在交叉轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列。

选项	说明
stretch	将空间平均分配给元素
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始

flex-grow

用于将弹性盒子的可用空间，分配给弹性元素。可以使用整数或小数声明。

例如为三个DIV 弹性元素设置了1、3、6 ，即宽度分成10等份，第三个元素所占宽度为(宽度/(1+3+6)) X 6。

如果弹性元素设置了宽度，将把（弹性盒子-弹性元素宽度和）后按照 flex-grow 进行分配 。

flex-shrink

与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值。

例如在600宽的弹性盒子中放了 1000 宽的弹性元素。并为最后两个元素设置了缩放，最后一个元素的缩放比例为 500 -( ( (1000-600) / (100X1+400x3+500X6) ) x 3 ) X 500 = 220.9，计算公式说明如下：

缩小比例 = 不足的空间 / (元素 1 宽度 x 缩小比例) + (元素 2 宽度 x 缩小比例) ...
最终尺寸 = 元素三宽度 - (缩小比例 x  元素 3 的宽度) X 元素宽度

flex-basis

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

可以是长度单位，也可以是百分比。flex-basis的优先级高于width、height属性。

优先级

flex-basis 优先级大于 width、height。

flex

flex是flex-grow、flex-shrink 、flex-basis缩写组合。

建议使用 flex 面不要单独使用 flex-grow / flew-shrink / flex-basis 。

下例定义平均分配剩余空间，并不进行尺寸缩小，基础尺寸为200px。

order

用于控制弹性元素的位置，默认为 order:0 数值越小越在前面，可以负数或整数。

下面是通过J动态改变order属性产生移动效果，因为本章节是讲CSS所以JS功能没有完善，只是体验一下order。

3.项目开发阶段

组件开发

新建components目录用于存放所有组件

VsCode中推荐使用wxapp-helper和wechat-snippet插件，快速开发

like组件

新建一个组件like 点赞小红心组件

在页面的JSON文件中配置使用的组件

接收一个JSON对象

引用组件

引用v-like组件,使用绝对路径

html" title=javascript>javascript">"usingComponents": {"v-like": "/components/like/index"}

使用组件

html"><v-like />

在like目录下新建images，用于存储组件所用的图片

html" title=小程序>小程序中像素单位px和rpx,

iPhone6下为二倍换算关系

新建app.wxss文件，定义全局样式

• 组件只能继承部分全局样式
• 页面可以继承全局样式
• 组件最好不要留有空隙

组件代码

html"><view class="container">
  <image src="images/like.png" />
  <text>
    9
  </text>
</view>

css">.container {
    display: inline-flex;
    flex-direction: row;
    padding: 10rpx;
}
.container image {
    width: 32rpx;
    height: 28rpx;
}
.container text {
    font-size: 24rpx;
    color: #bbbbbb;
    line-height: 24rpx;
    position: relative;
    bottom: 30rpx;
    left: 6rpx;
}

组件事件与事件处理-状态切换

bind:tap="onLike"定义点击

在index.js中的methods中定义处理函数

数据来源的三种方式

1. 直接写在WXML中
2. JS中获取
3. 从服务器获取

数据绑定

数据定义在data中

三元表达式

html" title=javascript>javascript">like?count1:count2

使用三元表达式来实现点赞与不点赞的效果

组件的封装性开放性及粒度

开放数据，开发数据

properties组件的属性列表

html" title=javascript>javascript">like: {
    type: Boolean,
        value: false,
            observer: function () {

            }
}

html" title=javascript>javascript">// components/like/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    like: {
      type: Boolean,
      value: false,
      observer: function () {
        
      }
    },
    count: {
      type: Number
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 点赞数据绑定
    count: 99,
    like: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onLike: function (event) {
      let like = this.properties.like
      let count = this.properties.count

      count = like?count-1:count+1 
      this.setData({
        count: count,
        like: !like
      })
    }
  }
})