详解微信开发之Flex布局

详解微信开发之Flex布局
微信小程序页面布局方式采用的是Flex布局。Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不确定的大小的。Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。 Flex布局的特点: 任意方向的伸缩，向左，向右，向下，向上 在样式...

微信小程序页面布局方式采用的是flex布局。flex布局，是w3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不确定的大小的。flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。

flex布局

Flex布局的特点:

任意方向的伸缩，向左，向右，向下，向上

在样式层可以调换和重排顺序

主轴和侧轴方便配置

子元素的空间拉伸和填充

沿着容器对齐

微信小程序实现了Flex布局,简单介绍下Flex布局在微信小程序中的使用。

伸缩容器

设有display:flex或者display:block的元素就是一个flex container(伸缩容器)，里面的子元素称为flex item(伸缩项目)，flex container中子元素都是使用Flex布局排版。

display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。

display:flex:指定为行内容器模式，在一行内显示子元素，可以使用flex-wrap属性指定其是否换行，flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)使用display:block(默认值)的代码:

<view class="flex-row" style="display: block;"> <view class="flex-view-item">1</view> <view class="flex-view-item">2</view> <view class="flex-view-item">3</view> </view>