微信小程序开发教程：Flex布局

微信小程序页面布局方式使用的就是Flex布局。

Flex布局，就是W3c在2009年明确提出的一种代莱方案，可以方便快捷，完备，积极响应式的同时实现各种页面布局。

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(默认值)的代码:

1

2

3

表明效果:

转意成display:flex的表明效果:

可以从效果图看见block和flex的区别，子元素view就是在下划线表明(block)还是行内表明(flex)。

主轴和两端轴

Flex布局的伸缩式容器可以采用任何方向展开布局。

容器预设存有两个轴：主轴(main axis)和两端轴(cross axis)。

主轴的已经开始边线为主轴起点(main start)，主轴的完结边线为主轴终点(main end),而主轴的长度为主轴长度(main size)。

同理侧轴的起点为侧轴起点(cross start),完结边线为侧轴终点(cross end),长度为侧轴长度(cross size)。详情请见到右图:

特别注意，主轴并不是一定就是从左到右的，同理两端轴也不一定就是从上到下，主轴的方向采用flex-direction属性掌控,它存有4个可以选值:

row :从左到右的水平方向为主轴

row-reverse：从右到左的水平方向为主轴

column:从上到下的横向方向为主轴

column-reverse从下到上的横向方向为主轴

如果水平方向为主轴，那个横向方向就是两端轴，反之亦然。

四种主轴方向设置的效果图:

图中的实例展现了采用了相同的flex-direction值排序方向的区别。

实例代码:

1

2

3

c1

c2

c3

运转效果：

对齐方式

子元素存有两种对齐方式：

justify-conent 定义子元素在主轴上面的对齐方式

align-items 定义子元素在侧轴上对齐的方式

jstify-content存有5个附加的对齐方式:

flex-start 主轴起点对齐(默认值)

flex-end 主轴完结点对齐

center 在主轴中母葛氏对齐

space-between 两端对齐，除了两端的子元素分别依靠向两端的容器之外，其他子元素之间的间隔都成正比

space-around 每个子元素之间的距离成正比，两端的子元素距离容器的距离也和其它子元素之间的距离相同。

justify-content的对齐方式和主轴的方向有关，右图以flex-direction为row，主轴方式就是从左到右,叙述jstify-content5个值的表明效果:

align-items则表示两端轴上的对齐方式:

stretch 充填整个容器(默认值)

flex-start 侧轴的起点对齐

flex-end 侧轴的终点对齐

center 在侧轴中母葛氏对齐

baseline 以子元素的第一行文字对齐

align-tiems设置的对齐方式，和侧轴的方向有关，右图以flex-direction为row,两端轴方向就是从上到下,叙述align-items的5个值表明效果:

存有了主轴和侧轴的方向再加之设置他们的对齐方式，就可以同时实现大部分的页面布局了。

案例地址：https://github.com/jjz/weixin-mina/blob/master/pages/flex/flex.wxml