微信小程序开发入门学习(2):小程序的布局
概述
小程序的布局采用了和Css3中相同的 flex（弹性布局）方式，使用方法也类似（只是属性名不同而已）.
水平排列
默认是从左向右水平依次放置组件，从上到下依次放置组件。
任何可视组件都需要使用样式来设置自身的属性，并完成相应的布局。
在小程序中，可以使用两种方式设置样式，一种是 class 属性，另外一种是 style 属性,跟HTML中一样。
前者需要指定在 wxss 文件中定义的样式，后者允许直接在组件中定义样式属性。
例如，如果要水平放置三个 view 组件，可以在 wxml 文件中使用下面的代码。
<!-- index.wxml --> <view class='flex-wrp' style='flex-direction:row'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> </view>
index.wxss中使用
.flex-wrp{ background-color: #fff; /* 弹性布局 */ display: flex; height: 100px; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background-color: green; } .bc_red{ background-color: red; } .bc_yellow{ background-color: yellow; }
效果:
也可以把 flex-direction:row 放在样式中
在index.wxss中添加一个
.flex_row{ /* 排列方式 */ flex-direction: row; }
index.wxml改为:
<!-- index.wxml --> <view class='flex-wrp flex_row'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> </view>
如果放置了多个 view 会怎么样呢？
从 flex-item 样式可知，每个 view 的尺寸是 100*100，单位是像素（px），如果放置过多，可能会发生如下两种情况。
1.压缩view的宽度
2.折行
第一种情况:
<!-- index.wxml --> <view class='flex-wrp flex_row'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> </view>
发生了宽度压缩全部挤在了一行上
为了不让它被压缩 要让它自动换行就要采用 折行
水平折行排列
要想让 view 折行，只需要加一个 flex-wrap:wrap 即可，代码如下：
<!-- index.wxml --> <view class='flex-wrp flex_row' style='flex-wrap:wrap'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> <view class='flex-item bc_green'></view> <view class='flex-item bc_yellow'></view> </view>
为了让色块显示之间不那么紧凑 改动了一下index.wxss中的样式
.flex-item{ width: 100px; height: 100px; margin: 10px; }
效果如下:
选择不同的手机模拟器（如 iPhone6 Plus、iPhone5），效果可能是不同的，因为每一行能显示的彩色方块数量是不同的。
垂直排列
只需要将 flex-direction 的属性值设为 column即可
<!-- index.wxml --> <view class='flex-wrp flex_column'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> </view>
index.wxss做以下更改.flex-wrp{
background-color: #fff; /* 弹性布局 */ display: flex; height: 400px; /* 更改 */
} .flex_column{ /* 新增 */
flex-direction: column; }
效果如下:
如果在垂直方向上view过多也会发生压缩:
所有的子 view 都被压缩在垂直高度 300 px 的空间内（宽度未改变）.
要使其折列跟折行的方式一样 只需加上 flex-wrap:wrap; 属性
.flex_column{ flex-direction: column; flex-wrap: wrap;/*新增*/ }
折列排列是在第2列、第3列从上到下依次排列的
水平排列对齐方式
默认对齐方式为从左到右
左对齐，在 style 属性中加入 justify-content: flex-start
右对齐:flex-end
居中对齐:center
代码如下：
左对齐
<!-- index.wxml --> <view class='flex-wrp flex_row' style='justify-content:flex-start;'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> </view>
效果如下:
左对齐
右对齐
居中对齐:
垂直排列对齐方式
\对于垂直排列来说，需要使用 align-items 属性（默认是左对齐），而不是 justify-content 属性，这两个属性的取值基本上相同。
右对齐:
<!-- index.wxml --> <view class='flex-wrp flex_column' style='align-items:flex-end;'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> </view>
水平等间隔排列
如果想让 view 均匀地水平分别在窗口上，每两个 view 之间的间隔相同，那么就需要将 justify-content 属性的值设为 space-between，布局代码如下:
<!-- index.wxml --> <view class='flex-wrp flex_row' style='justify-content: space-between;'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> </view>
如果子 view 过多，并且设置为折行显示.
<!-- index.wxml --> <view class='flex-wrp flex_row' style='justify-content: space-between;'> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> <view class='flex-item bc_yellow'></view> <view class='flex-item bc_green'></view> <view class='flex-item bc_red'></view> </view>
.flex_row{ /* 排列方式 */ flex-direction: row; /* 开启折行 */ flex-wrap: wrap; }
从上图所示的效果来看，不管折多少行，同一行相邻两个 view 之间的间距都是相等的.
