*注释快捷键 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 定义元素自身对齐