小程序中wxss应用（更新中）

1 . 图片显示样式

image mode 属性

注：image组件默认宽度300px、高度225px

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

2 . 列表两列显示

转 CSDN — Drupal学习笔记  — 小程序页面布局之Flexbox布局

效果图：

CSS部分：

#two为当前区域外层包装。
#two .area为内部循环包装标签。

HTML部分：

通过HTML结构使用flexbox布局使每个‘area’视图循环排列并且通过定义外层包装的

实现内部元素横向排列并且通过

让元素自动换行。这同时需要设置内部元素的宽度为一个数值，这个数值使用CSS3的响应式数值。vw vh。

当前内部元素设置为：

46vm的宽度，表示为当前屏幕宽度的46%的宽度部分，正好实现内容换行后形成两行排列的布局。

然后在外层包装定义：

align-content:center; 作用是在换行后元素的垂直对齐方式，位于层高的中间位置对齐。

横向的间距则使用justify-content:space-around; 设置元素的自动间距（根据外层的宽度和自身的宽度），在这里我们设置了内部元素的宽度为46vw，表示46%的宽度，两块46%相加是92%的宽度，这里剩余的宽度部分会被平均分配出元素之间的间距形成平均间隔。

备注：#two的高度设置成了70vh，表示这个层的高度相当于70%高度的屏幕区域，为了使内部元素高度的间隔平均相等，这里设置成70%正合适。

知识点：

flexbox布局

justify-content   //用于调整横向布局时的内容对齐方式，分别有五种对齐方式。

flex-direction:row  //使元素横向排列

flex-wrap:wrap; //使横向排列的元素实现自动换行。

align-content: //自动换行模式下元素的行对齐方式。

3 . 左右布局

转 CSDN — chinaboyliusir的博客  —  微信小程序的左右布局

效果图：

代码：

左边的文本
右边的文本

demo.wxss代码如下:

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.left {
font-family: “黑体”;
color: #888;
font-size: 40rpx;
}

.right {
font-family: “楷体”;
color: #ff0000;
font-size: 80rpx;
}