本文共 1989 字，大约阅读时间需要 6 分钟。

微信小程序常用布局display-flex

display: flex / block

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。在微信小程序中，flex布局是构建页面布局的核心工具之一。它能够有效处理元素的排列、对齐和空间分配问题，是设计者在小程序开发中经常使用的关键技术之一。

flex布局的基本原理是将盒子模型转换为弹性盒模型。与传统的盒子模型相比，弹性盒模型具有以下几个显著特点：

flex容器默认情况下不会为其内容创建空白区，因此内容会相互紧密排列。如果需要为内容创建空白区，可以在每个轴上设置justify-content和align-items属性。

Flex盒模型提供了两种主要的方向："水平方向"（又被称为row）和"垂直方向"（又被称为column）。默认情况下，flex盒的方向是水平的，也就是说，内容会沿着水平方向排列。

为了让内容在两个方向都能灵活排列，可以为容器设置以下属性：

exhibit: flex-direction property

• row （默认）：定义内容沿着水平方向排列。
• column：定义内容沿着垂直方向排列。

要实现垂直方向的布局，可以将整个容器设置为column方向，所以fake-element { flex-direction: column; }

在实际应用中，为了让flex盒的内容更好地对齐，可以使用以下属性：

exhibit: justify-content property

• flex-start（默认）：内容在盒子左边排列。
• flex-end：内容在盒子右边排列。
• center：内容在盒子中心位置对齐。
• space-between：内容在盒子两边间隔相等。
• space-around：内容在盒子周围间隔相等。

展示 flex 的主轴方向：

设置一个元素为 flex:1，意思是让它使用主轴方向上的可扩展性。默认情况下，所有 flex 容器的主轴方向为 horizontal，box-sizing: border-box。

在实际开发中，可以通过为元素设置 flex: 1 来让它们在主轴方向上充分利用空间。

此外，垂直轴上的对齐可以通过设置 align-self 属性来实现：

exhibit: align-self property

• flex-start（默认）：垂直方向左对齐。
• flex-end：垂直方向右对齐。
• center：垂直方向居中。
• stretch：沿着主轴方向拉伸至盒子边。

Flex布局的美化方法包括：

• 设置 flex: 1让元素占用可扩展空间
• 合理使用 flex-direction和 justify-content等属性
• 使用 align-self进行垂直轴对齐
• 结合其他布局属性如 margin和 padding 来实现细化布局

Block布局的应用场景

在小程序开发中，除了Flex布局外，Block布局也具有重要的应用场景。Block布局中的元素会像block元素一样展开，形成块大小的内容区域。

Block布局的特点：

• 每个block元素都占据一个独立的空间，互不影响
• 内容块之间不会共享幻象空间
• 内容块的大小由自身大小和外部 CSS决定

Block布局适用于以下场景：

与Flex布局相比，Block布局的优势体现在其简单性和直观性。对于大多数基础布局，Block布局可以通过简单地设置属性来快速完成布局设计，而无需通过复杂的Flex属性进行微调。

Flex与Block的综合运用

在实际开发中，Flex和Block布局经常结合使用。Flex布局用于实现复杂的布局要求，而Block布局则用于构建独立的内容块。在小程序开发中，可以针对屏幕宽度设置布局方式：

• 横屏布局：采用 flex布局实现跨屏幕内容排列
• 导航栏布局：常用 flex或block布局
• 卡片布局：典型使用 flex和block搭配
• 中间内容区域： flex布局适合实现居中内容布局

在实际开发中，应当根据具体需求选择合适的布局方式，并结合 CSS属性进行优化。通过合理运用Flex和Block布局，可以充分发挥小程序在不同设备上的展示效果。

总之，Flex和Block布局是小程序开发中必不可少的技能。掌握这些布局技巧，可以帮助开发者快速构建高效美观的页面布局。

转载地址：http://nzdyk.baihongyu.com/