微信小程序开发之wxss中的那些事（一）

微信小程序开发中，页面的布局怎么整？

各位道友请留步，如果你是新手，那么请看我XX两句 ，如果你是大佬，那么对不起打扰了，你随意。

啥是WXSS？

用官方的解释就是：

WXSS的全称为WeiXinStyle Sheets，是一套样式语言，用于描述WXML的组件样式。它是由CSS语言，全称为CascadingStyle Sheets，修改扩充而来，因而具备了CSS的大部分特性。

如果说css是一种用来变美的语言，那么wxss也同样如此，它决定了wxml中的组件应该如何显示，通过wxss的代码，我们可以对组件设置字体、颜色、位置、大小等样式，也能够添加动画效果，使页面呈现出最佳的视觉效果。

简洁的说：
就是美化样式用的。。。

基本语法

wxss的基本语法很简单，只有三个内容：选择器，属性和属性值。

这是wxnl的代码块：

<view class="test1">这是测试</view>

实现的效果：

可以看到很丑对吧，在wxss加些样式：

.test1 {
  font-size: 40rpx;
  text-align: center;
  font-weight: bold;
  color: red;
}

这就是wxss的好处，获取其中的具体你还不是很懂，没关系，看完这篇博客你会有更清晰的认识。

什么是rpx

rpx （ responsive pixel）响应单位：

rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx
通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

在微信小程序开发中，我们通常用iPhone6（375x667）这里的单位是px像素，2rpx=1px

什么是 flex

flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

引入flex是为了解决：

解决元素居中问题

自动弹性伸缩，合适适配不同大小的屏幕，和移动端

下面列举几个常用的属性：

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

其中flex-direction有以下几种值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。