本篇中，我们把Flex布局的几种方式先说明再举例的方式展示给的大家。
当然最好自己动手跟着编码达到最好的效果。
注：源码在最底部可以下载。
先打开微信小程序WEB开发者工具，新建项目，删除无用的代码。
下面是官方就这个属性的说明：
flex-directionflex-direction属性表示布局的方向 有两个值： row | column 默认属性是row 行布局
下面的代码是用了row行布局，如下：
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果如下图：
flex-direction: column属性：
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="flex-direction:column;height: 100%;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
flex-direction: column的效果图：
另外布局样式中，除了flex控制外，还可以有另外两个样式属性，如下是其中一个justify-content.****justify-contentjustify-content:弹性项目在主轴main-axis线上的对齐方式； 值：flex-start | flex-end |center | space-between | space-around （注：当横向排列时 主轴就是x轴；反之则是y轴。）
justify-content:flex-start
<view class="section">
<view class="section__title">justify-content:flex-start</view>
<view class="flex-wrp" style="flex-direction:row;justify-content:flex-start;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果如下图：
除了justify-content外，还可以通过下面的align-items属性来控制布局。****align-itemsalign-Items表示在垂直方向上的布局情况定义在父级容器中；有 flex-start | flex-end | center |stretch 四个值。
align-items:flex-start;
<view class="section">
<view class="section__title">align-items:flex-start;</view>
<view class="flex-wrp" style="flex-direction:row;align-items:flex-start;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果如下图：
align-items:center;
<view class="section">
<view class="section__title">align-items:center;</view>
<view class="flex-wrp" style="flex-direction:row;align-items:flex-start;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
align-items:flex-end;
<view class="section">
<view class="section__title">align-items:flex-end;</view>
<view class="flex-wrp" style="flex-direction:row;align-items:flex-end;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果如下图：
本示例的源码请到这个网页中查看下载：
http://bbs.html51.com/t-425-1-1/
欢迎您与51小程序共同成长，成为微信小程序定制开发专家。
