week02 flex+组件-微信小程序开发_week开发微信小程序-优快云博客

本文链接：https://blog.youkuaiyun.com/cy_mint/article/details/105025814

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

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

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;//自适应宽度