微信小程序(Flex布局---容器属性)

本文介绍了微信小程序中Flex布局的容器属性,包括flex-direction、flex-wrap、justify-content、align-items、align-content等,详细阐述了这些属性的作用、取值及应用场景,帮助开发者更好地理解和使用Flex布局。

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

盒模型分类
盒模型分类:IE盒模型标准盒模型
本质区别:宽高计算方式。
标准盒模型:(实际占比:width+padding+border,需要额外计算)
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
IE盒模型:(实际占比:width,不需要额外计算)
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

容器与项目元素
日常开发中,采用Flex布局的元素,一般简称为“元素”。
容器内的元素简称为“项目”或“元素”。
例:
在这里插入图片描述
主轴与交叉轴
在介绍各个属性之前,需要先明确一个坐标轴。
水平方向的是主轴(main axis),垂直方向的是交叉轴(cross axis)。
在这里插入图片描述
容器与项目元素
布局属性:
容器属性: flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content。
元素属性: order、flex-grow、flex-shrink、flex-basis、flex、a

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值