微信小程序_(组件)flex布局

　　小程序建议使用flex布局进行排版

　　flex是一个盒装弹性布局

　　flex是一个容器，所有子元素都是他的成员

　　定义布局：display:flex

　　flex容器的属性：

　　　　一、flex-direction：排列方向

　　　　二、flex-wrap：换行规则

　　　　三、justify-content：对齐方式

　　　　四、order：成员之间的显示顺序

　　　　五、flex：成员所占屏幕的比例

一、flex-direction：排列方向

　　【默认】row：从左到右行排序

　　row-reverse：从右到左行排序

　　colomn：从上到下列排序

　　colomn-reverse：从下到上列排序

　　index.html中定义五个<view>分别加上a、b、c、d、e五个文本标签，微信小程序中默认flex-direction:row

<!--index.wxml-->
Cynical丶Gary
<view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view>

index.html

.container{display: flex;/* 默认从左到右排序 *//* flex-direction: row; *//* 从右到左排序  *//* flex-direction: row-reverse; *//* 从上到下排序 *//* flex-direction: column; *//* 从下到上排序 *//* flex-direction: column-reverse; */}.size{width: 150rpx;height: 150rpx;
}.a{background: red;
}.b{background: yellow;
}.c{background: blue;
}.d{background: green;
}.e{background: orange;
}

index.wxss

二、flex-wrap：换行规则

　　【默认】nowrap：不换行

　　wrap：换行

　　wrap-reverse：逆向换行

　　当五个元素size超出微信小程序横向排版时（320），微信小程序默认使用flex-wrap: nowrap不换行

<!--index.wxml-->
Cynical丶Gary
<view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view>

index.wxml

.container{display: flex;/* 默认不换行 *//* flex-wrap: nowrap; *//* 换行 *//* flex-wrap: wrap; *//* 逆向换行 *//* flex-wrap: wrap-reverse; */}.size{width: 500rpx;height: 150rpx;
}.a{background: red;
}.b{background: yellow;
}.c{background: blue;
}.d{background: green;
}.e{background: orange;
}

index.wxss

三、justify-content：对齐方式

　　【默认】flex-start：从左到右，向左对齐

　　flex-end：从右到左，向右对齐

　　center：居中对齐

　　space-between：块级元素中间有空格

　　space-around：让空格围绕在成员周围

　　当五个元素并列排序size未超出微信小程序横向布局

<!--index.wxml-->
Cynical丶Gary
<view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view>

index.wxml

.container{display: flex;/* flex-start:默认左对齐 *//* justify-content: flex-start; *//* flex-end:向右对齐 *//* justify-content: flex-end; *//* center:居中对齐 *//* justify-content: center; *//* space-between:块级元素中间有空格 *//* justify-content: space-between; *//* space-around:让空格围绕在成员周围 *//* justify-content:space-around;  */
}.size{width: 100rpx;height: 150rpx;
}.a{background: red;
}.b{background: yellow;
}.c{background: blue;
}.d{background: green;
}.e{background: orange;
}

index.wxss

四、order：成员之间的显示顺序

　　五个元素并列排序由order属性决定，本来d和e中order属性分别是4和5，现将order属性改为5和4，可见d和e块级元素位置进行了交换

<!--index.wxml-->
Cynical丶Gary
<view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view>

index.wxml

.container{display: flex;}.size{width: 100rpx;height: 150rpx;
}.a{background: red;order:1;
}.b{background: yellow;order:2;
}.c{background: blue;order:3;
}.d{background: green;order:4;
}.e{background: orange;order:5;
}

index.wxss

五、flex：成员所占屏幕的比例

　　当给五个块级元素a、b、c、d、e设置order为1时候，每个元素所占当行比例的1/5，当将a的order设置为3时，a元素占当行比例的3/(3+1+1+1+1)，依次类推

<!--index.wxml-->
Cynical丶Gary
<view class="container"><view class='a size'>a</view><view class='b size'>b</view><view class='c size'>c</view><view class='d size'>d</view><view class='e size'>e</view></view>

index.wxml

.container{display: flex;}.size{width: 100rpx;height: 150rpx;
}.a{background: red;order:1;flex:10;
}.b{background: yellow;order:2;flex:2;
}.c{background: blue;order:3;flex:1;
}.d{background: green;order:4;flex:1;
}.e{background: orange;order:5;flex:1;
}

index.wxss

转载于:https://www.cnblogs.com/1138720556Gary/p/10604039.html

微信小程序_(组件)flex布局相关推荐

微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
微信小程序学习笔记④——Flex布局[实战样例之画骰子]
✅ 关于 Flex,很多优秀的前辈已经总结过了,比如:阮一峰的<Flex 布局教程:语法篇>.知乎林东洲的<30 分钟学会 Flex 布局>等等.他们主要是基于网页的,小辈斗胆 ...
微信小程序_组件学习_001
view标签等效于html中的div 都是块级元素,独占一行,可设置宽高. 属性类型默认值 hover-class string none hover的中文意思是悬浮,但在微信小程序里面是按下去 ...
微信小程序开发之——flex布局
打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码. flex-direction flex-direction属性表示布局的方向有两个值: row | column 默认属性是 ...
image 微信小程序flex_微信小程序进阶－flex布局
对于一个后端程序员来说最麻烦的就是布局了,今天就介绍下小程序的布局,介绍一种高效的小程序布局方案.笔者之前也做过native app的布局,对比下来,小程序的布局没有native那么灵活,毕竟goog ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
文章目录一.准备 1.目标 2.小程序中的flex布局回顾flex布局小程序中要把div换成view标签,别的不变二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽小程 ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
【微信小程序】组件之页面布局
小程序的flex布局小程序建议使用flex布局进行排版 flex就是一个盒装弹性布局 flex是一个容器,所有子元素都是它的成员. 定义布局:display:flex flex 容器的属性: 1.属 ...

微信小程序_(组件)flex布局

微信小程序_(组件)flex布局相关推荐

最新文章

热门文章