⼩程序wxss之flex布局详解⼀、wxss
1.尺⼨单位：
⼩程序规定了全新的尺⼨单位"rpx"，其原理是⽆视设备原先的尺⼨，统⼀规定屏幕宽度为750rpx        尺⼨换算：
iphone5：1rpx=0.42px
iphone6：1rpx=0.5px
iphone6 plus：1rpx=0.522px
2.常⽤属性：
background-color  :  背景⾊
color  : 前景⾊
font-size    : 字体⼤⼩
flex布局对齐方式border  :    边框
width  :    宽度
height  :    ⾼度
3.内联样式
(1) style
<view >Test</view>
(2) class
定义class类，然后在wxss⾥配置相应的属性
⼆、flex布局
(1) 基本概念
1.容器和概念
<view class=”a”>
<view class=”b”>
<view class=”c”></view>
</view>
</view>
对a,b⽽⾔：a容器  b项⽬
对b,c⽽⾔：b容器  c项⽬
2.坐标轴
⽔平布局、垂直布局
(2) 容器属性
1.flex-direction：⽤于设置主轴⽅向，通过设置坐标轴可以规定项⽬的排列⽅向
6.justify-content：⽤于设置项⽬在主轴⽅向上的对齐⽅式，以及分配项⽬之间及其周围多余的空间
7.aligin-items：⽤于设置项⽬在⾏中的对齐⽅式
8.align-content：⽤于多⾏排列时设置项⽬在交叉轴⽅向上的对齐⽅式，以及分配项⽬之间极其周围多余的空间
9.flex-grow：⽤于设置项⽬扩张因⼦，当项⽬在主轴⽅向上还有剩余空间时，通过设置项⽬扩张因⼦进⾏剩余空间的分配
10.flex-basis：根据主轴⽅向代替项⽬的宽或⾼
11.align-self：设置项⽬在⾏中交叉轴⽅向上的对齐⽅式，⽤于覆盖容器的align-items，这么做可以对项⽬的对齐⽅式做特殊处理

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。