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

最新推荐文章于 2025-02-27 09:28:14 发布

weixin_45343878

最新推荐文章于 2025-02-27 09:28:14 发布

阅读量659

点赞数 1

CC 4.0 BY-SA版权

文章标签：微信小程序 Flex布局-容器属性

本文链接：https://blog.csdn.net/weixin_45343878/article/details/99694539

本文详细介绍了微信小程序中Flex布局的容器属性，包括flex-direction、flex-wrap、justify-content、align-items和align-content，解释了它们的作用、取值及应用场景，帮助开发者更好地理解和运用Flex布局实现复杂界面的灵活适配。

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

场景
容器与项目元素
主轴与交叉轴
容器属性

盒模型分类
盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式
在这里插入图片描述

场景
在小程序开发中，需要考虑各种尺寸终端设备上的适配。
在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现
比如下面常见的信息列表，要求内容高度不确定情况下，保持垂直居中
在这里插入图片描述
常见的信息列表排版方式
这种情况下，建议用flex布局

在不固定高度信息的例子中，只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中。
在这里插入图片描述
微信小程序 View视图标签支持两种布局方式：Block 和 Flex
注意：
所有 View 默认都是 block浮动布局，所以如果要使用 flex 布局的话需要进行显式声明

容器与项目元素
简称：
日常开发中，采用flex布局的元素，一般简称为“容器”
容器内的元素简称为“项目”或者“元素”
container容器和item项目
在这里插入图片描述
主轴与交叉轴
水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）

容器与项目元素
布局属性：
容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
概念：
flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。

flex不单是一个属性，还包含了一套新的属性集