在弹性布局下（display:flex），元素我们可以设置以下属性，如果不是弹性盒对象的元素，则以下属性不起作用。

``` flex-basis: number|auto|initial|inherit; flex-direction: row|row-reverse|column|column-reverse|initial|inherit; flex-flow: flex-direction flex-wrap|initial|inherit; flex-grow: number|initial|inherit; flex-shrink: number|initial|inherit; flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; ```

flex-directions属性规定灵活的项目方向，row代表水平方向（行），row-reverse同行，不过以相反的顺序。column代表垂直方向（列），column-reverse同列，不过以相反的顺序。initial默认值，inherit继承。

flex-wrap 属性规定灵活项目是否拆行或拆列。nowrap规定灵活的项目不拆行或不拆列。wrap规定灵活的项目在必要的时候拆行或拆列。wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺,initial默认值，inherit继承。

flex-basis 属性用于设置或检索弹性盒伸缩基准值(宽度值)，number 一个长度单位或者一个百分比，规定灵活项目的初始长度。auto自动撑开，根据内容决定。initial默认值，inherit继承。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式,是 flex-direction 和 flex-wrap性的复合属性。

flex-grow 属性用于设置或检索弹性盒子的扩展比率。number一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

实战操作

水平方向，纵向布局

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

居上，局下，居左，居右

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

• flex-start 主轴起点对齐(默认值)
• flex-end 主轴结束点对齐
• center 在主轴中居中对齐
• space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
• space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。

<view class="section__title bold">对齐方式</view>
<view >justify-content:flex-start</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:flex-start;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
<view>flex-direction: flex-end</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:flex-end;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
<view>flex-direction: center</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:center;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
<view>flex-direction: space-between</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:space-between;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
<view>flex-direction: space-around</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:space-around;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>

<view>align-items: stretch</view>
<view >
  <view class="bg_gray b_height" style="display:flex;align-items: stretch">
    <view class="flex-item2 ">1</view>
    <view class="flex-item2">2</view>
    <view class="flex-item2 ">3</view>
  </view>
</view>
<view>align-items: flex-start</view>
 <view class="bg_gray b_height" style="display:flex;align-items:flex-start;">
    <view class="flex-item2 ">1</view>
    <view class="flex-item2">2</view>
    <view class="flex-item2 ">3</view>
  </view>
<view>align-items: flex-end</view>
<view class="bg_gray b_height" style="display:flex;align-items:flex-end;">
  <view class="flex-item2 ">1</view>
  <view class="flex-item2">2</view>
  <view class="flex-item2 ">3</view>
</view>
<view>align-items: center</view>
 <view class="bg_gray b_height" style="display:flex;align-items:center;">
    <view class="flex-item2 ">1</view>
    <view class="flex-item2">2</view>
    <view class="flex-item2 ">3</view>
  </view>
<view>align-items: baseline</view>
<view class="bg_gray b_height" style="display:flex;align-items:baseline;">
    <view class="flex-item2 " style="height: 30px;padding-top:20px">1</view>
    <view class="flex-item2" style="height:50px">2</view>
    <view class="flex-item2 " style="height:40px;">3</view>
</view>

按钮悬浮底部

  position：fixed ；
  bottom：0