码迷,mamicode.com
首页 > 微信 > 详细

微信小程序开发--flex详细解读(2)

时间:2019-08-29 16:03:46      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:http   小程序   play   结束   程序   没有   justify   微信   rect   

一、align-items和其参数  stretch / baseline

注:sretch只有在交叉轴没有设置固定长度的情况下才有作用

技术图片                                技术图片

baseline是以第一个子元素为基准,后面的子元素与第一个子元素对齐。

 二、flex-wrap 和其参数 row-wrap (默认)  /  wrap    /  

flex-wrap:作用---换行

技术图片

 flex布局,基础内容已经结束,欢迎大家一起交流。

<view class="root">
<view class="box1">1</view>
<view class="box2">2</view>
<view class="box3">3</view>
</view>
 
 
.root{
display: flex;
/* 方块以列的方式排布 */
/* flex-direction: column; */
/* 把方块的位置调转 */
/* flex-direction: column-reverse; */
/* justify-content: space-evenly; */
flex-direction: row;
justify-content: center;
/* align-items: baseline; */
flex-wrap:wrap;
height: 370px;
}
.root view{
width: 150px;
height: 100px;
 
}
.box1{
">bisque;
font-size:30px;
}

.box2{
">blue;
font-size:20px;
}

.box3{
">pink;
font-size:60px;
}

微信小程序开发--flex详细解读(2)

标签:http   小程序   play   结束   程序   没有   justify   微信   rect   

原文地址:https://www.cnblogs.com/DreamchaserHe/p/11429880.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!