微信小程序布局,小程序view之flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex
所有 View 默认都是 block
要使用 flex 布局的话需要显式的声明:
display:flex;
下面就来介绍下微信小程序的 Flex 布局
先做一个简单的 demo
<view class="main"><view class="item item1">1</view><view class="item item2">2</view><view class="item item3">3</view></view>
加上背景色能看的更清楚些
.main {width: 100%;background-color: antiquewhite;
}.item {height: 100rpx;width: 100rpx;
}.item1 {background-color: red;
}.item2 {background-color: dodgerblue;
}.item3 {background-color: greenyellow;
}
然后大概是这个样子的:
然后我们先都加上 display: flex
好使用 flex 布局,主意,貌似 view 不会自动继承,需要在每个想使用的 view 里都加上。
首先是横向布局和竖向布局,要设置属性 flex-direction ,它有4个可选值:
- row:从左到右的水平方向为主轴
- row-reverse:从右到左的水平方向为主轴
- column:从上到下的垂直方向为主轴
- column-reverse:从下到上的垂直方向为主轴
我们来看下设置 row 和 row-reverse 的区别:
row:
row-reverse:
然后我们要设置元素在横向上的布局方向,需要设置 justify-content 属性,它有5个值可选:
- flex-start:主轴起点对齐(默认值)
- flex-end:主轴结束点对齐
- center:在主轴中居中对齐
- space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
- space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同
然后我们要设置元素在纵向上的布局方向,需要设置 align-items 属性,它有5个值可选:
- stretch 填充整个容器(默认值)
- flex-start 侧轴的起点对齐 (这里我们手动设置下子 view 的高度,来看的明显一些)
- flex-end 侧轴的终点对齐
- center 在侧轴中居中对齐
- baseline 以子元素的第一行文字对齐
子 View 还有个属性 align-self,可以覆盖父元素的 align-items 属性,它有6个值可选:auto | flex-start | flex-end | center | baseline | stretch (auto 为继承父元素 align-items 属性,其他和 align-items 一致)
比如上面最后一个 baseline 的例子,我们把 item3 设置 align-self:flex-end;
就成了这个样子:
此外还有 flex-wrap 属性,用于控制子 View 是否换行,有3个值可选:
- nowrap:不换行(默认)
- wrap:换行
- wrap-reverse:换行,第一行在最下面
还有子 View 有个 order 属性,可以控制子元素的排列顺序,默认为0。
比如还是上面那个例子,我们把 item3 设置 order:-1; 可以把 item3 排在前面
flex 常用布局就这些
来源:https://www.cnblogs.com/sun8134/p/6395947.html
微信小程序布局,小程序view之flex 布局相关推荐
- 微信小程序 View:flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
- flex布局一行三个_CSS Flex布局
Flex之前 在flex布局出现以前,css布局大致就以下几种布局: 主要使用: normal flow 正常流.文档流 float + clearfix position: relative + p ...
- css3 flex布局九宫格,css3最全flex布局结构整理
一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左 ...
- html5 flex布局纵向,html最新的flex布局
每当我们去进行前端页面布局时都会用到float.position.margin等一些属性,这些属性用起来略显麻烦,并且浏览器去进行渲染时会大大消耗性能 所以今天我们来谈谈最新的 flex布局,也叫弹性 ...
- 响应式布局:CSS3弹性盒flex布局模型
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و 页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来 ...
- css布局-浮动、定位、flex布局
1.CSS布局 - 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 - 标准流(文档流/普通流)排版方式 标准流(文档流/普通流) -标准流(文档流/ ...
- 微信小程序入门与实战之rpx响应式单位与flex布局
新建页面的技巧与规则 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: app.json必须有一个pages数组: ...
- image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一 前言 最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
- 微信小程序开发 — Flex布局
前言 微信小程序页面布局方式采用的是Flex布局. Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局. Flex布局提供了元素在容器中的对齐,方向以及顺序 ...
最新文章
- MPB:深大李猛组-基于PacBio SMRT三代测序的红树林沉积物真菌群落的研究
- Deco 智能代码体验版正式上线啦,快来体验设计稿一键生成代码~
- 如何使用 C# 判断一个文件是否为程序集
- 转: Linux Grep 命令说明
- iPhone 13 mini背部新外观曝光:双摄对角线排布
- OpenShift 4.5 新特性 - 创建任务和定时任务
- bootstrap轮播图 原点变为方块_Brother兄弟机床原点设定方法
- Python 分析在德的中国程序员,告别 996 ?
- htm——position:static、absolute、relative详解
- git与gitk查看某个文件的历史提交记录
- 微博html5版不能登录界面,爬取微博信息,使用了cookie仍然无法登录微博
- MAC协议微信自动生成带备注固定收款码免挂机监控协议回调
- 教你炒股票24:MACD对背弛的辅助判断
- linux 冒号命令,Linux命令之:(冒号)
- CentOS7.6的详细安装步骤
- arcgis如何将16bit栅格数据转换为8bit栅格数据
- 0004-1-模型好坏评判标准
- jquery ui table
- BJDCTF 2nd writeup(二)
- 单片机可以替代PLC吗?