week02 flex+组件-微信小程序开发

本文深入解析了Flex布局的特性,包括inline与inline-block的区别,弹性盒子的使用方法,如justify-content和align-items属性的调整技巧。同时,介绍了小程序组件的基础知识,包括组件创建、引用及尺寸单位的应用原则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

flex布局

  1. inline和inline-block区别
    display:inline;//行内元素,不能设置宽高`
    display:inline-block;//行内元素,可以设置宽高
  1. flex 弹性盒子
    flex container:
     display:flex;
     flex-direction:column; //纵向排列
     flex-direction:row;//水平排列
     flex-direction:row-reverse;//水平倒序
     flex-direction:column-reverse;//纵向倒序
  1. reverse倒序:改变元素顺序和对齐方向
  2. 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的上间距
space-around12间距离即1的下间距+2的上间距

  1. 主轴和交叉轴
    水平垂直居中
	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;//换行,上下有间距,设置容器高度可以消除


在这里插入图片描述

小程序组件基础知识

  1. 新建组件 右击"新建componet"自动生成四个不同类型文件
  2. 引用组件 page/.json文件
 	"usingComponents": {
    	"v-like":"../components/like/index"//自定义名字:路径
    }
  1. 相对路径和绝对路径
    绝对路径:/components/like/index
    相对路径:…/components/like/index
  2. 尺寸单位和设计原则
    px: 小程序px=原px/2
    rpx: 小程序rpx=原rpx
    字体多用px
  3. 平方字体设置
 font-family: "PingFangSC-Thin";//仅ios可用
  1. 全局样式 app.wxss
	page{
    	font-family: "PingFangSC-Thin";
	}
page指小程序所有页面
  1. 组件只能继承极少全局样式
    不能继承:eg:background-color…
    可以继承:eg:font,color…
  2. 宽度默认整行
    display:inline-flex;//自适应宽度
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值