flex布局
- inline和inline-block区别
display:inline;//行内元素,不能设置宽高`
display:inline-block;//行内元素,可以设置宽高
- flex 弹性盒子
flex container:
display:flex;
flex-direction:column; //纵向排列
flex-direction:row;//水平排列
flex-direction:row-reverse;//水平倒序
flex-direction:column-reverse;//纵向倒序
- reverse倒序:改变元素顺序和对齐方向
- justify-content对齐方向根据flex-direction而变化
无reverse,reverse时正好相反
justify-content:flex-start;//上/左
justify-content:flex-end;//下/右
justify-content:center;居中
justify-content:space-between;//最左边靠左,最右边靠右,间距相等
justify-content:space-around;//等距分布
space-around12间距离即1的下间距+2的上间距
- 主轴和交叉轴
水平垂直居中
display:flex;
flex-direction:column;//水平排列
justify-content:center;//垂直居中-主轴
align-items:center;//水平居中-交叉轴
改为
align-items:stretch;//无设置高度
改为
align-items:baseline;//每个元素中文字以第一个文字为基线对齐
center
stretch
6.换行
flex-wrap:nowrap;//默认值,不换行
flex-wrap:wrap;//换行,上下有间距,设置容器高度可以消除
小程序组件基础知识
- 新建组件 右击"新建componet"自动生成四个不同类型文件
- 引用组件 page/.json文件
"usingComponents": {
"v-like":"../components/like/index"//自定义名字:路径
}
- 相对路径和绝对路径
绝对路径:/components/like/index
相对路径:…/components/like/index - 尺寸单位和设计原则
px: 小程序px=原px/2
rpx: 小程序rpx=原rpx
字体多用px - 平方字体设置
font-family: "PingFangSC-Thin";//仅ios可用
- 全局样式 app.wxss
page{
font-family: "PingFangSC-Thin";
}
page指小程序所有页面
- 组件只能继承极少全局样式
不能继承:eg:background-color…
可以继承:eg:font,color… - 宽度默认整行
display:inline-flex;//自适应宽度