微信小程序学习笔记(7)--------布局基础
ui布局基础
一、flex布局
1、flex的容器和元素
2、flex容器属性详解
1>flex-direction不仅设置元素的排列方向,还设置主轴和交叉轴如下图主轴是由上到下
2>flex-wap决定元素如何换行(排列不下时)
flex-wap:wap
flex-wap:nowap
flex-wrap: wrap-reverse
3>flex-flow 是flex-direction和flex-wap的简写
4>justify-content元素再主轴上的对齐方式
justify-content: flex-end
justify-content: flex-start
justify-content: center
justify-content: space-around(在主轴上所占的空间是一样的)
justify-content: space-between(两端对齐,中间的间隔是一样的)
5>aligin-items元素再交叉轴的对齐方式
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch(不设置高度时,自动使每个item占满整个容器的高度)
align-items: baseline(让元素以元素里面的一行文字的基线对齐)
Index.wxml
index.wxss
3、flex元素属性详解
1>flex-grow当有多余空间时,元素的放大比例
flex-grow: 0;容器有多余的空间时也不放大。
flex-grow: 1;(每个都占一份)
将3设置为 flex-grow: 2;(当容器有多余空间的时候,1、2、4只占据一份,3占据两份)
2>flex-shrink当空间不足时,元素的缩小比例
flex-shrink: 1;(默认值,空间不足时默认等比缩小)
flex-shrink: 0;(空间不足时不缩小)
1、2、4缩小一份,3缩小10份
3>flex-basis元素再主轴上占据的空间
3在主轴上占据200rpx
4>flex是grow、shrink、basis的简写
order定义元素的排列顺序
在item中设置元素的排列顺序
在wxml文件中设置元素的顺序
align-sellf 定义元素自身的对齐方式会复写 justify-content
二、相对定位和绝对定位
相对定位的元素是相对自身进行定位,参照物是自己。
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。
1、relative;
相对自己向左偏移150rpx
最新文章
- ssh 登录
- win10使用技巧
- September 24th 2016 Week 39th Saturday
- 在myql sqlserver里边怎么快速找到带有关键字的表
- Search in Rotated Sorted Array II
- NodeJS:树的序列化
- ccr test
- 【网络流24题】No. 20 深海机器人问题 (费用流)
- Linux下多任务间通信和同步-信号
- CKEditor&ckfindtor
- Js三级联动菜单
- python基础知识4--数据类型与变量
- Kettle系列: kettle标准化trans模板
- (转)C# Textbox的ImeMode取值对中文输入法的影响
- GPS定位基本原理浅析
- python 文件目录遍历
- ttl传输中过期
- 转载-MyBatis学习总结
- python地址解析经纬度,城市
- windbg符号路径设置
热门文章
- windows下搭建ffmpeg+nginx+rtmp-module搭建实时视频环境
- 第一百五十五节,封装库--JavaScript,轮播器
- vue项目创建步骤小结
- Duilib教程-自动布局2
- Android开发:《Gradle Recipes for Android》阅读笔记(翻译)6.2——DSL文档
- HDU 5892 Resident Evil
- 【BZOJ4367】[IOI2014]holiday假期 分治+主席树
- 用 Stellar.js 制作视差滚动效果
- 巨蟒python全栈开发-第8天 文件操作
- Linux的.a、.so和.o文件 windows下obj,lib,dll,exe的关系