首页 > 其他 > 详细

布局flex

时间:2020-04-29 17:31:18      阅读:76      评论:0      收藏:0      [点我收藏+]

1.在index.wxcss里设置  第三个元素类i3里单独设置 align-items: flex-end;  全部元素设置 align-items: baseline(解释:以文字进行对齐);

 

技术分享图片

 

 2.在index.wxml里设置 class="item i3"  

技术分享图片

 

3.交叉轴上的布局

 技术分享图片

 

 4.1flex-grow  默认情况下

技术分享图片

 

 4.2flex-grow:1时占满整行

技术分享图片

 

 4.3元素3占两份

技术分享图片

 

5.1  flex-shrink: 1;

 技术分享图片

 

5.2  全部元素flex-shrink: 1; 元素3设置  flex-shrink: 0;

 技术分享图片

 

 6 felx-basis  元素在主轴上占据的空间

技术分享图片

 

 7 在wxml里给元素排序  style="order:2"

技术分享图片

 

布局flex

原文:https://www.cnblogs.com/fanqiusha1988/p/12803437.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!