微信小程序开发:Flex布局教程( 二 ) _睿知

justify-content有5个可选的对齐方式:
flex-start 主轴起点对齐(默认值)
flex-end主轴结束点对齐
center 在主轴中居中对齐
space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。
justify-content的对齐方式和主轴的方向有关，下图以flex-direction为row，主轴方式是从左到右,描述jstify-content5个值的显示效果:

justify-content

文章插图
align-items表示侧轴上的对齐方式:
stretch填充整个容器(默认值)
flex-start 侧轴的起点对齐
flex-end 侧轴的终点对齐
center在侧轴中居中对齐
baseline 以子元素的第一行文字对齐
align-tiems设置的对齐方式，和侧轴的方向有关，下图以flex-direction为row,侧轴方向是从上到下,描述align-items的5个值显示效果:

文章插图
aign-items
有了主轴和侧轴的方向再加上设置他们的对齐方式，就可以实现大部分的页面布局了。
源代码地址:https://github.com/jjz/weixin-mina/blob/master/pages/flex/flex.wxml