微信小程序Flexbox布局如何快速实现小程序基本布局？

本文共计1628个文字，预计阅读时间需要7分钟。

问题描述：flexbox布局——弹性盒子布局。弹性盒子布局可以快速地对小程序进行布局。传统的布局方法对内容量少的页面来说很方便，但对于内容较多的页面来说则显得繁琐。

问题描述

flexbox layout ——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便，但对页面比较复杂的来讲就很繁琐了。所以使用 flexbox layout 对小程序页面内容进行整体封装布局，这样既方便又快捷。那么如何使用弹性盒子快速实现小程序的基本布局呢？

传统的布局方式对布局目标的实现属性赋值非常的分散，严重依赖内容的大小和页面的结构，这样操作起来非常的麻烦。而弹性盒子就比较灵活、统一，可以对整个页面的布局进行总体把控设置。弹性盒子就是将页面的内容整体放进一个容器里面进行整体的有结构的布局设置让页面更加和谐。

解决方案

首先，对 flexbox layout 的使用方法进行简单介绍。

先将所需封装的内容放在一个 view 容器里面，再对该 view 容器定义一个 class 。然后需要在 wxss 里面对 class 进行设置布局。

在 wxss 中首先用 display ： flex 将 view 容器变成一个弹性盒子，但是弹性盒子默认的主轴方向是从左往右所以每个元素都是从左往右的放置。根据自己的需要修改主轴的方向。

这里以从上往下的主轴方向，垂直方向上均匀分布，元素在水平方向上居中显示为例。在 wxss 用 flex-direction ： column 来实现从上到下的布局。