【微信小程序】View组件与Flexbox弹性盒模型 字体颜色摆放显示案例，

微信web开发者工具 v0.11.122100

/**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 :80px;
  height:80px;
}
.bc_green
{
  background-color: #00ff00;
}
.bc_red
{
  background-color: #ff0000;
}
.bc_blue
{
  background-color: #0000f8;
}

<!--index.wxml代码:注意：符号和字母不能填写错误-->

<view class="page">  
  <!--第1段案例:文本显示-->
  <view class="page-section">
    <text>-第1段案例:View Demo</text>
  </view>


  <!--第2段案例：横着显示的代码演示-->
  <view class="page-section">
    <view>第2段案例：flex-direction : row</view>
    <view style="display: flex;flex-direction:row">  <!--横着显示-->
        <view class="flex-item bc_green"></view>
        <view class="flex-item bc_red"></view>
        <view class="flex-item bc_blue"></view>
    </view>
  </view>
  <!--第3段的案例：竖着显示的代码演示-->
  <view class="page-section">
   <view>第3段的案例：flex-direction:column</view> 
    <view style="display: flex;flex-direction:column">  <!--竖着显示-->
      <view class="flex-item bc_green"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
    </view>
  </view>


  <!--第4段案例：justify-content代码演示flex-start-->
  <view class="page-section">
  <view>第4段案例：justify-content:flex-start</view>
    <view style="display: flex; flex-direction: row;justify-content:flex-start;"><!--放在左边开始显示-->
      <view class="flex-item bc_green"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
    </view>
  </view>
  
  <!--第5段案例:justify-content代码演示flex-end-->
  <view class="page-section">    
  <view>第5段案例:justify-content:flex-end</view>
    <view style="display: flex; flex-direction: row;justify-content:flex-end;"><!--放在右边开始显示-->
      <view class="flex-item bc_green"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
    </view>
  </view>


  
  <!---第6段案例:justify-content代码演示center-->
  <view class="page-section">
  <view>第6段案例:justify-content:center</view>
    <view style="display: flex; flex-direction: row;justify-content:center;">
      <view class="flex-item bc_green"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
    </view>
  </view>


  <!---第7段案例:justify-content代码演示space-between-->
  <view class="page-section">
  <view>第7段案例:justify-content:space-between</view>
    <view style="display:flex;flex-direction:row; justify-content:space-between;">
      <view class="flex-item bc_green"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
    </view>
  </view>
  
  <!---第8段案例:justify-content代码演示space-around-->
  <view class="page-section">
  <view>第8段案例:justify-content:space-around</view>
    <view style="display:flex;flex-direction:row; justify-content:space-around;">
      <view class="flex-item bc_green"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
  </view>


  <!---第9段案例:justify-content代码演示align-items:flex-start-->
  <view class="page-section">
  <view>第9段案例: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"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
    </view>
  </view>


  <!---第10段案例:justify-content代码演示align-items:flex-end-->
  <view class="page-section">
  <view>第10段案例: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"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
    </view>
  </view>


  <!---第11段案例:justify-content代码演示align-items:flex-center-->
  <view class="page-section">
  <view>第11段案例:align-items:flex-center</view>
    <view style="display:flex;height:200px;flex-direction:row;justify-content:space-around;align-items:flex-center">
      <view class="flex-item bc_green"></view>
      <view class="flex-item bc_red"></view>
      <view class="flex-item bc_blue"></view>
    </view>
  </view>
<!--结束-->
</view>