微信小程序学习笔记(四)
设置在主轴上的排列方式:
默认情况下,主轴的方向是从左到右。在主轴方向上,可以通过 justify-content 属性来设置他们的排列方式。排列方式有以下几种:
- flex-start :项目靠近父盒子的左侧。默认采用的就是这种排列方式。示例图如下:
2 flex-end :项目靠近父盒子的右侧。
2. center :所有项目会挨在一起在父盒子的中间位置。
3. space-around :项目沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半。
4. space-between :项目沿主轴均匀分布,位于首尾两端的子容器与父容器紧紧挨着。
5. space-evenly :项目在主轴上均匀分布,收尾两端的自容器到父容器的距离跟自容器间的间距是一样的。
设置在侧轴上的排列方式:
默认情况下,侧轴的方向是从上到下。在侧轴方向上,可以通过 align-items 属性来设置他们的排列方式。排列方式有以下几种:
6. flex-start :起始端对齐。默认就是这种对齐方式。
7. flex-end :末尾段对齐。
center :中间对齐。
8. stretch :如果项目没有设置高度。那么子容器沿交叉轴方向的尺寸拉伸至与父容器一致。比如我们将 .inner 的高度属性去掉,代码如下:
.outter .inner{ background: gray; width: 100px; /* height: 100px; */ border: 1px solid #ccc;
}
效果图为:
9. baseline :基线对齐,这里的 baseline 默认是指首行文字,所有子容器向基线对齐,交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。比如我们把代码改成如下:
<view class='outter'><view class='inner'><view style='margin-top:10px;background:#eee;'>hello</view></view><view class='inner'>2</view>
</view>
然后 wxss 文件为:
.outter{ display: flex; align-items: baseline; width: 300px; height: 200px; background: pink;
}
.outter .inner{...}
那么效果图为:
更换主轴和侧轴方向
主轴默认的方向是从左到右,侧轴的方向默认是从上到下,当然也可以进行修改。可以通过 flex-direction 进行修改。可以修改的参数为以下:
11. row :默认属性。从左到右。
12. row-reverse :从右到左。
column :从上到下。
- column-reverse :从下到上。
换行
默认情况下,元素个数如果超过一定数量,那么在一行当中就排列不下。此时 flex 默认的处理方式是压缩元素,使其能在一行中排列下来。比如以下代码:
<view class='outter'><view class='inner'>1</view><view class='inner'>2</view><view class='inner'>3</view><view class='inner'>4</view>
</view>
.outter{ display: flex; width: 300px; height: 200px; background: pink; }
.outter .inner{ background: gray; width: 100px; height: 100px; border: 1px solid #ccc;
}
那么会把这四个元素挤压在一行中。即使给元素设置了宽度也没有用的。效果图如下:
可以通过 flex-wrap 来改变排列的方式。可以设置的属性如下:
- nowrap :不换行。默认的。
- wrap :换行。
wrap-reverse :换行,但是第一行会在下面。
微信小程序学习笔记(四)相关推荐
- 微信小程序学习笔记(四)自定义组件
文章目录 1. 组件的创建与引用 1.1 创建组件 1.2 引用组件 1.3 全局引用 VS 局部引用 1.4 组件和页面的区别 2. 样式 2.1 组件样式隔离 2.2 修改组件的样式隔离选项 3. ...
- 小程序 pagescrollto_微信小程序学习笔记(三)-- 首页及详情页开发
一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
- 微信小程序学习笔记(1)
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...
- 微信小程序学习笔记一 + 小程序介绍 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 微信小程序学习(四):微信小程序连接云数据库
微信小程序学习(四):微信小程序连接云数据库 我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题 这里有个初始化,非常重要!非常重要!非常重要!!! 是放在app.js里 ...
- 自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记 自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明 自己的微信小程序学习笔记[2]--从零开始新建项目 文章目录 其他微信小程序的学习笔记 前言 一.Lin ...
- 微信小程序学习笔记(七)----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
- 微信小程序学习笔记(一)
干货来袭 基础前言 微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现 了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
- 微信小程序学习笔记(四)——自定义组件
自定义组件 组件的创建与引用 创建组件 在根目录下创建 components 文件夹 右键点击 components 文件夹,选择新建 Component,就会自动生成.wxml..wxss..js. ...
- 微信小程序学习笔记02:微信小程序注册
文章目录 零.学习目标 一.小程序注册方法 1.注册 2.登录 二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具 三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...
最新文章
- 为什么要低温保存_渔之歌科普课堂:冷冻食品为什么要规定零下18摄氏度冷藏?...
- 在 Windows 7 下安装 Hyper-V manager
- day20-自定义分页2
- redis 主从配置_应用 | Redis实现 主从,单例,集群,哨兵,配置应用
- 数字化转型,赋能新零售解决方案介绍
- Spring Boot 日志的使用及logback.xml的使用
- CodeIgniter典型的表单提交验证代码
- 软件概要设计_软件测试模型之 V模型
- 若n = 2; m = 5 则 计算 2 + 22 + 222 + 2222 + 22222的和 ;若n = 3; m = 4 则 计算 3 + 33 + 333 + 3333的和
- 基于freemarker生成pdf
- 怎么查询网站最近的cdn服务器,如何查看网站是否cdn加速
- windows10如何修改pin码?
- 超级经典回帖专用语(转载)
- python pool_Python pool.Pool方法代码示例
- EXCEL之REPT(),让数据更直观!
- 《SQL基础》04. SQL-DQL
- Ameya360:AMD芯片组驱动有什么用 ?
- android App中bug收集的工具类
- 1075-Incorrect table definition; there can be only one auto column and it must be defined as a key
- KANKAN AI不良信息过滤技术:用数据证明自己是最好的
热门文章
- python中index函数_详解python中的index函数用法
- 数据可用不可见,百度新版本联邦学习PaddleFL来了
- echart triggeron设置两个方法_6个超实用方法:打造PPT立体空间感
- 怎么计算python程序执行时间_【华为云技术分享】计算python程序执行时间
- python基础函数图_Python基础:函数
- 吴恩达机器学习006分类问题
- Linux 查看磁盘分区、文件系统、磁盘的使用情况相关的命令和工具介绍
- 第一行代码:以太坊(1)-创建自己的私有区块链
- 「微信小程序免费辅导教程」24,基础内容组件icon的使用探索与7月26日微信公众平台的更新解读...
- spark发行版笔记9