E企盈小程序营销工具技术服务商 热线:4006-838-530

微信小程序入门教程学习笔记——UI篇之布局基础

E企盈小程序直播系统

官方文档目录一.布局基础1.flex的容器元素2.flex容器属性2.1 flex-direction2.2 flex-wrap2.3 justify-content2.4 align-items3.flex元素属性3.1 flex-grow3.2 flex-shrink3.3 flex-basis3.4 flex3.5 order3.6 align-self4.相对布局5.绝对布局一.布局基础flex布局 ( display:flex )1.flex的容器元素2.flex容器属性属性名称作用取值flex-direction决定元素的排列方向colum、row(默认)flex-wrap决定元素如何换行(排列不下时候)warp、nowarp(默认)、warp-reverseflex-flowflex-direction和flex-wrap的简写略justify-content元素在主轴上的对齐方式center、flex-start、flex-end、space-around、space-between ……align-items元素在交叉轴上的对齐方式flex-start(默认)、flex-end、center、stretch、baseline ……TIPS:flex-direction 决定了主轴和交叉轴,colum→从上到下是主轴;row→从左到右是主轴flex-flow 是简写,属性值中间用空格连接 效果图:2.1 flex-directiondisplay: flex;flex-direction: row;display: flex;flex-direction: column;2.2 flex-wrapdisplay: flex; flex-wrap: wrap;display: flex;flex-wrap: nowrap;display: flex;flex-wrap: wrap-reverse;2.3 justify-contentdisplay: flex;justify-content: center;display: flex;justify-content: flex-end;display: flex;justify-content: flex-start;display: flex;justify-content: space-around;display: flex;justify-content: space-between;2.4 align-itemsdisplay: flex;  justify-content: space-between;  align-items: flex-start;display: flex;  justify-content: space-between;  align-items: flex-end;//以第一行文字对齐,给第三个小方块加了特效display: flex;justify-content: space-between;align-items: baseline;此时再将align-items设为flex-start,可以清晰的观察出其本质区别3.flex元素属性属性名称作用取值flex-grow当有多余空间时,元素的放大比例0(默认)…其余数值(放大倍数)flex-shrink当空间不足时,元素的缩小比例1(默认)…其余数值(缩小倍数)flex-basis元素在主轴上占据的空间数值,单位pxflexgrow、shrink、basis的简写略order定义元素的排列顺序1 2 3 4…顺序数值align-self定于元素自身的对齐方式flex-start、flex-end、center3.1 flex-growflex-grow: 1;.item{  flex-grow: 1;}.item2{  flex-grow: 2;}3.2 flex-shrinkflex-shrink: 1;.item{  flex-shrink: 1;}.item2{  flex-shrink: 0;}3.3 flex-basisflex-basis: 200px;3.4 flex flex: 1 1 50px;3.5 order<view class=’container’>  <view class=’item’ style=’order:2′>1</view>  <view class=’item’ style=’order:3′>2</view>  <view class=’item’ style=’order:4′>3</view>  <view class=’item’ style=’order:1′>4</view></view>3.6 align-self.container{  …  align-items: flex-start;}.item{  …}.item2{  align-self: flex-end;}4.相对布局精髓:相对定位的元素是相对自身进行定位的,参照物是自己/* 为第二个元素设置了特殊样式 */position: relative;left:50rpx;top:70rpx;5.绝对布局精髓:绝对定位的元素是相对离它自己的一个已定位的父级元素定位的 /* 为第二个元素设置了特殊样式 */ position:absolute; left:50rpx; top:70rpx;<view class=’container’>  <view class=’item’>1</view>  <view class=’item2′>2</view>  <view class=’item’>3</view>  <view class=’item’>4</view></view>//!!!当父级元素也没有定位,就以整个页面为参照/*当父级元素已经定位了*/.container{  position: absolute;  left: 80rpx;  top:100rpx}/* 为第二个元素设置了特殊样式 */.item2{  position:absolute;  left:50rpx;  top:70rpx;} 谢谢浏览,如有错误烦请指正,喵喵喵~ (≧∀≦)ゞ微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序入门教程学习笔记——UI篇之布局基础
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏