微信小程序布局[flex]

微信小程序页面布局采用flex布局。flex布局是W3C在2009年提出的一种新的方案，以简便、完整、响应式的实现各种页面布局。

flex布局提供了元素在容器中的对齐、方向、顺序、甚至动态的或大小不确定的。

一、flexbox模型

1. display属性
   flexbox 由伸缩容器和伸缩项目组成。将元素的display属性设置为flex和inline-flex，可以得到一个 伸缩容器。
   设置为flex的容器被渲染成一个块级元素，而设置为inline-flex的容器则被渲染成一个行内元素。

2. flex-direction属性
   flex-direction属性和旧版本的box-orient属性相似，都是设置伸缩项目的排列方式，设置从上往下排列如下所示：

div { flex-direction: column ;}

flex-direction 选项含义表:

属性值	说明
row	设置从左到右排列
row-reverse	设置从右到左排列
column	设置从上到下排列
column-reverse	设置从下到上排列

3. flex-wrap属性
   flex-wrap属性与旧版本的box-lines相似。设置无法容纳时，自动换行如下所示：

div { -ms-flex-wrap: -wrap; }

flex-wrap 属性取值表:

属性值	说明
nowrap	默认值，都在一行或一列显示
wrap	伸缩项目无法容纳时，自动换行
wrap-reverse	伸缩项目无法容纳时，自动换行，方向和wrap相反

4. flex-flow属性

flex-flow属性是集合了排列方向和控制换行的简写形式
justify-content属性和旧版本中的box-pack相似，设置伸缩项目的对齐方式。

div { justify-content: space-around; }

flex-flow属性其他取值表：

属性值	说明
flex-start	伸缩项目以起始点靠齐
flex-end	伸缩项目以结束点靠齐
Center	伸缩项目以中心点靠齐
space-between	伸缩项目平局分布
space-around	同上，但两端保留一半的空间

5. align-items属性
   align-items属性和旧版本的box-align相似，用于处理伸缩容器的额外空间。

div { align-items: center; }

6. flex属性
   flex属性和旧版的box-flex相似，用于控制伸缩容器的比例分配。

 flex: 1;

二、实例

.wxml

  1
  2
  3

.wxss
page{
  height:100%;
}
/* 这个page很关键 */
.flex-wrap{
  display: -webkit-flex;
}
.flex-wrap view{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  font-size: 40rpx;
  color: white;
}
.a{
  background-color: green;
}
.b{
  background-color: blue;
}
.c{
  background-color: purple;
}

flex-wrap-1.png

调整[flex比例调整]：

page{
  height:100%;
}
/* 这个page很关键 */
.flex-wrap{
  display: -webkit-flex;
}
.flex-wrap view{
  /* width: 200rpx; */
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  font-size: 40rpx;
  color: white;
}
.a{
  background-color: green;
  flex: 1;
  /*占据整个盒子的1/4*/
}
.b{
  background-color: blue;
  flex: 1;
  /*占据整个盒子的1/4*/
}
.c{
  background-color: purple;
  flex: 2;
  /*占据整个盒子的2/4*/
}

flex-wrap-2.png

设置flex-direction: column;

page{
  height:100%;
}
/* 这个page很关键 */
.flex-wrap{
  display: -webkit-flex;
  flex-direction: column;
  height: 800rpx;
}
.flex-wrap view{
  /* width: 200rpx; */
  /* height: 200rpx; */
  text-align: center;
  line-height: 200rpx;
  font-size: 40rpx;
  color: white;
}
.a{
  background-color: green;
  flex: 1;
  /*占据整个盒子的1/4*/
}
.b{
  background-color: blue;
  flex: 1;
  /*占据整个盒子的1/4*/
}
.c{
  background-color: purple;
  flex: 2;
  /*占据整个盒子的2/4*/
}

flex-column.png

三、补充

ps：关于flexbox还有很多的属性，这里大致铺垫了一下，如需要，则请查看微信小程序开发文档