微信小程序View视图容器简单例子-微信小程序俱乐部 www.wxappclub.com

原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处

废话不多说，直接上代码。呵呵
代码如下：

<!--index.wxml-->
<view class="page">
  <view class="page-section">
     <text>View Demo</text>
  </view>

   <view class="page-section">
      <view>flex-direction:row</view>
      <view >
        <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>

  <view class="page-section">
      <view>flex-direction:column</view>
      <view style="display:flex;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>

  <view class="page-section">
      <view>flex-direction:column</view>
      <view style="display:flex;flex-direction:column">
        <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-->
  <view class="page-section">
      <view>justify-content:flex-start</view>
      <view style="display:flex;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>

    <view class="page-section">
      <view>justify-content:flex-end</view>
      <view style="display:flex;flex-direction:row;justify-content: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>

  <view class="page-section">
      <view>justify-content:center</view>
      <view style="display:flex;flex-direction:row;justify-content:center;">
        <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>

  <view class="page-section">
      <view>justify-content:space-between</view>
      <view style="display:flex;flex-direction:row;justify-content:space-between;">
        <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>

    <view class="page-section">
      <view>justify-content:space-around</view>
      <view style="display:flex;flex-direction:row;justify-content:space-around;">
        <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>
  <view class="page-section">
      <view>align-items:flex-start</view>
      <view style="display:flex;height:200px;flex-direction:row;justify-content:space-around;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>

   <view class="page-section">
      <view>align-items:flex-end</view>
      <view style="display:flex;height:200px;flex-direction:row;justify-content:space-around;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>

  <view class="page-section">
      <view>align-items:center</view>
      <view style="display:flex;height:200px;flex-direction:row;justify-content:space-around;align-items:center;">
        <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>
</view>

css：

/**index.wxss**/
.page{
  flex: 1;
  background-color: #ffff00;
  font-size: 16px;
}
.page-section{
  padding: 10px;
  background-color: #fffff0;
  margin: 10px;
  font-size: 16px;
}
.flex-item{
  width: 100px;
  height: 100px;
}
.bc_green{
  background-color: #00ff00;
}
.bc_red{
  background-color: #ff0000;
}
.bc_blue{
  background-color: #0000f8;
}

效果图