专业 靠谱 的软件研发伙伴

您的位置:首页 > 新闻动态 > 微信小程序不得不知的Flex布局

发布日期:2020-03-26

微信小程序不得不知的Flex布局


微信小程序的页面开发和WEB一样,通过CSS对内容进行渲染。与传统WEB不同的是,微信小程序的CSS不建议使用float和position这种传统的布局方式。

取而代之的是可以利用Flex(弹性盒子)对页面进行布局。

我们在之前期的《CSS垂直居中的解决方案》中讨论过Flex的应用。这期我们深入讨论下Flex在微信小程序布局中的具体使用情况。

Flex布局是W3C组织在2009年提出来的一个新的布局方案,其目的是为了让页面布局更加简单,而且能很好的支持响应式布局。它并不是小程序独有的技术,但源于早期浏览器对Flex布局的支持并不完善,导至这种布局方式的使用非常少。

而小程序完美地支持了Flex布局,这为开发者快速敏捷地进行页面开发创造了便利条件。

Flex主要作用在页面容器上,被称为“弹性盒子”。比如我在首页使用<view class="main">做为整个页面的容器。

小程序开发

页面代码

设置 .main的CSS属性如图

小程序开发

.main的CSS属性

注意,我们必须对容器设置display:flex; 这样容器内的元素才会遵守Flex的布局方式。

flex-direction用于指定容器内元素的排列方式,有4个可选项:

row

colum

row-reverse

colum-reverse

在Flex布局中,有一个很重要的概念就是“主轴”。这个主轴可以是水平的(row或row-reverse),也可以是垂直的(colum或colum-reverse)。

“主轴”直接决定了容器中元素的排列方式,如图

小程序开发

row

小程序开发

row-reverse

小程序开发

column

小程序开发

column-reverse

随着主轴指向的不同,页面中的元素排列方式也会不同。在我们的这个微信小程序示例中,我打算让页面自上而下排列,所以使用了flex-direction:column;

确定主轴的方向后,我们再来讨论align-itmes的作用。align-items主要是用于确定容器中子元素在“交叉轴”方向上的排列方式。

所谓的交叉轴是指相对于主轴而言,交叉的那一个方向。如果主轴是row或row-reverse(水平),交叉轴就是垂直的(自上而下)。如果主轴是column或column-reverse(垂直)

那交叉轴就是水平的(自左而右)。

在这个例子中,我们的主轴是column垂直的,则设置align-items:center 说明在横向上元素居中布局。最后的页面效果如图

小程序开发

页面效果

这里对于图标、文字及按钮部分的css代码就不赘言了,无非是设置宽高,颜色等属性。如图:

小程序开发

其他CSS代码

最后,本次分享仅讨论了Flex在微信布局中的应用技巧,并没有展开来做深入的讨论。如果你有什么好的分享,请留言吧,谢谢!

我们是正规实体技术开发公司,拥有专业的小程序解决方案,价格实惠,专业可靠。我们以客户需求为导向,定制商业微信小程序。以下是我们技术经理微信,可以添加进行咨询:


推荐阅读: