微信小程序界面笔记

*注释快捷键 ctrl+k+c 或ctrl+/

*取消注释 ctrl+k+u

一、宽度高度设置

wxml文件

<view class='container'>

</view>

wxss文件

.container{
  height: 100%;
  width: 100%;
  background:gainsboro;
}

编译后不出结果

解决方法：

1.把.container换成page（不是.page）

2.把100%换成具体的值，如150rpx

二、加边框

.item{
  width: 100rpx;
  height: 60rpx;
  background: goldenrod;
  border:1px solid rgb(10, 10, 10);
}

border 1px边框宽度

solid 实线

最后一个是颜色

三、flex容器属性

1、flex-direction 元素排列方向

.wxss文件

.container{
  height: 500rpx;
  width: 500rpx;
  background:gainsboro;
  display: flex; /* 指定flex属性*/
  flex-direction: column; /* 元素排列方向为按列排（默认为按行排，即row）*/
}

按列排列时从上到下是主轴，从左到右是交叉轴；按行排列反之

2、flex-wrap 决定元素如何换行

.container{
  height: 500rpx;
  width: 500rpx;
  background:gainsboro;
  display: flex;
  flex-direction:row; 
  flex-wrap:wrap;
}

wrap可换成nowrap（不换行）wrap-reverse（反转）

3、flex-flow ：flex-direction和flex-wrap的简写

.container{
  height: 500rpx;
  width: 500rpx;
  background:gainsboro;
  display: flex;
  flex-flow: row wrap
}

4、justify-content 元素在主轴上的对齐方式

.container{
  height: 500rpx;
  width: 500rpx;
  background:gainsboro;
  display: flex;
  flex-flow: row wrap;
  justify-content: center

}

justify-content有5个值

flex-start 默认从左边对齐（按列时默认从上对齐）

flex-end 从右边对齐（按列时从下对齐）

center 居中

space-around 每行/列均匀分布

space-between 两端对齐

5、align-items 元素在交叉轴的对齐方式

flex-start 默认

flex-end 与flex-start相反

center 居中

stretch 当元素没有设置相对应长度时，自动占满整个容器

baseline 以元素内文字对齐

四、flex元素属性

1、flex-grow 容器有多余空间时元素放大比例

默认值为0（不放大）还可以为1、2....

2、flex-shrink 容器空间不足时元素的缩小比例

默认值为1（等比例缩小）

3、flex-basis 元素在主轴上占据的空间

4、flex grow、shrink、basis的简写

5、order 定义元素排列顺序

6、align-self 定义元素自身对齐

微信小程序界面笔记

猜你喜欢