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

小程序 当button遇上Flex布局

时间:2019-03-13 19:52:27      阅读:525      评论:0      收藏:0      [点我收藏+]

标签:技术   比较   alt   等于   超过   文件中   lex   对齐   说明   

当需要将button按行排列,当超过一行时,可以换行,从左到右排列,想实现如下效果(实现的比较粗糙,能说明问题就行,呵~~~): 

技术图片

 

使用Flex布局,在设置主轴方向上对齐方式,使用justify-content属性,默认是flex-start:项目对齐主轴起点,项目间不留空隙。

所以在wxss中就不需要写了justify-content属性了


于是写如下代码:

// .wxml文件中
<
view class=‘btns‘> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </view>
// .wxss文件
.btns
{ margin-top: 40rpx; display: flex; flex-direction: row; flex-wrap: wrap; }

 

但是得到的确实如下效果:??。。。what?! why???疑惑,非常疑惑

技术图片

 

经过一番折腾,有了实现预期效果的解决方法,如下:

// .wxml文件 (.wxss文件的内容不变)
<
view class=‘btns‘> <view> <button>按钮1</button> </view> <view> <button>按钮2</button> </view> <view> <button>按钮3</button> </view> <view> <button>按钮4</button> </view> <view> <button>按钮5</button> </view> <view> <button>按钮1</button> </view> <view> <button>按钮2</button> </view> <view> <button>按钮3</button> </view> </view>

 

当button遇到flex布局时,要是不用view包起来的话,实现的效果如justify-content:space-evenly的效果,其中space-evenly表示:项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

 

为什么会实现这样的效果,我还不得而知,如果你知道,欢迎指教!

 

小程序 当button遇上Flex布局

标签:技术   比较   alt   等于   超过   文件中   lex   对齐   说明   

原文地址:https://www.cnblogs.com/china-fanny/p/10525156.html

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