微信小程序学习笔记（五）

align-content属性在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。可以通过 align-content 属性来确定排列的方式。可以设置以下值。

flex-start ：从上往下排列。示例代码如下：

.outter {display: flex;flex - wrap: wrap;align - content: flex - start;width: 300px;height: 300px;background: pink;
}

2 flex-end ：末尾段对齐。效果图如下：

2. center ：中点对齐。效果图如下：

4 space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。效果图如下：

3. space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。效果图如下：

4. stretch ：默认方式，如果没有给元素设置高度，那么会占满整个交叉轴。

.outter.inner {background: gray;width: 100px;/* height: 100px; */border: 1px solid#ccc;box - sizing: border - box;
}

效果图如下：

元素（子容器）的相关属性
flex-basis：
定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。
.item {
flex-basis: | auto;
}
默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。

当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flexshrink 配合使用才能发挥效果。

当 flex-basis 值为 0 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。 flex-grow：
设置元素是否需要扩大的比例。默认值为0，即如果存在剩余空间，也不放大。比如有以下代码：

<view class='outter'><view class='inner inner1'>1</view>   <view class='inner inner2'>2</view>
</view>

wxss代码为：

outter {display: flex;width: 300px;height: 300px;flex - wrap: wrap;background: pink;
}.outter.inner {background: gray;width: 100px;height: 100px;border: 1px solid#ccc;box - sizing: border - box;
}.outter.inner1 {flex - grow: 2;
}.outter.inner2 {flex - grow: 1;
}

效果图为：

因为两个元素分别占了2份，1份，所以第一个元素是占据了整个容器宽度的2/3，第二个元素占据了整个容器宽度的1/3。
另外，如果设置 flex-grow 为0，那么他的宽度将会保持为设置的宽度，如果宽度没有设置，那么将根据他的子元素来保留宽度。假如代码为：

<view class='outter'><view class='inner inner1'>1</view>   <view class='inner inner2'>2</view>
</view>

wxss代码为：

.outter.inner1 {flex - grow: 0;
}.outter.inner2 {flex - grow: 1;
}

效果图为：

如果把 inner1 的 width 删掉，那么效果图为：

flex-shrink属性：
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。比如有以下代码：

<view class='outter'><view class='inner inner1'>1</view><view class='inner inner2'>2</view><view class='inner'>3</view><view class='inner'>4</view>
</view>

wxss的代码如下：

.outter {display: flex;width: 300px;height: 300px;background: pink;
}.outter.inner {background: gray;width: 100px;height: 100px;border: 1px solid#ccc;box - sizing: border - box;
}.outter.inner2 {flex - shrink: 0;
}

效果图为：

因为给 inner2 设置了 flex-shrink 为0，所以即使在空间不够的情况下，他也不会被压缩。
flex属性：

flex属性是 flex-grow flex-shrink flex-basis 三个属性的简写。假设以上三个属性同样取默认值，则 flex 的默认值
是 0 1 auto 。

关于 flex 的取值，有以下几种方式：

auto ：等价于 1 1 auto 。也就是允许增长，允许缩小，宽度为自动。
none ：等价于 0 0 auto 。也就是不允许增长，不允许缩小，宽度为自动。
非负数字：这个数字表示的是 flex-grow 的值， flex-shrink 为1，表示允许缩小， flex-basis 为0%。可以认为他就是把剩余的空间进行填充。比如以下代码是等价的：

.item {flex: 1;
}.item {flex - grow: 1;flex - shrink: 1;flex - basis: 0 % ;
}

 0 ：对应的三个值分别为 0 1 0% 。比如以下代码是等价的：

.item {flex: 0;
}.item {flex - grow: 0;flex - shrink: 1;flex - basis: 0 % ;
}

长度或者百分比：则这个值视为 flex-basis 的值，而 flex-grow 为1， flex-shrink 为1。比如以下代码是等价的：

.item - 1 {flex: 0 % ;
}.item - 1 {flex - grow: 1;flex - shrink: 1;flex - basis: 0 % ;
}.item - 2 {flex: 24px;
}.item - 2 {flex - grow: 1;flex - shrink: 1;flex - basis: 24px;
}

两个非负数字：分别视为 flex-grow 和 flex-shrink 的值， flex-basis 取 0% ，如下是等同的：

.item {flex: 2 3;
}.item {flex - grow: 2;flex - shrink: 3;flex - basis: 0 % ;
}

一个非负数字和一个长度或百分比：则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;
}.item {flex - grow: 11;flex - shrink: 1;flex - basis: 32px;
}

更多关于flex布局请参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

https://zhuanlan.zhihu.com/p/25303493
App生命周期

请参考：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

微信小程序学习笔记（五）相关推荐

微信小程序学习笔记(五) 云开发
1. 云开发简介 1.1 什么是云开发微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
微信小程序学习笔记(五) npm包+全局数据共享+分包
文章目录 1. 使用npm包 1.1 小程序对 npm 的支持与限制 1.2 Vant Weapp 组件库 1.2.1 安装 Vant 组件库 1.2.2 使用 Vant 组件 1.2.3 定制全局主 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习（五）：使用本地缓存，完成默认登录、、alert的使用、、引用全局变量，app.jsh中的变量
微信小程序学习(五):使用本地缓存,完成默认登录一开始想在app.js里面通过全局变量来实现默认登录状态的,但是没有用,每次重启还是要登录,在网上找了些资料后,可以用本地缓存, 这个是js文件这是 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
微信小程序学习笔记01：微信小程序概述
文章目录零.学习目标一.小程序的历史二.如何访问小程序 1.线下扫码 2.微信搜索 3.公众号关联 4.好友推荐 5.历史记录 6.桌面访问 7.附近的小程序三.小程序与HTML5和APP比较 ...

微信小程序学习笔记（五）

微信小程序学习笔记（五）相关推荐

最新文章

热门文章