微信小程序View组件和Flexbox弹性盒模型

flex-direction

flex-direction:row  行布局
flex-direction:column 列布局
微信小程序View组件和Flexbox弹性盒模型
 
 

justify-content线上的对齐方式

flex-start
flex-end
center
space-between
space-around
微信小程序View组件和Flexbox弹性盒模型
 

align-items伸缩容器中布局

flex-start
flex-end
center
stretch
微信小程序View组件和Flexbox弹性盒模型

这个例子中只给了两个做例子,其它的可以自己演示。

实例
index.wxml文件
<!--index.wxml-->
<view class="page">
  <view class="page-section">
    <text>学习微信小程序开发</text>
  </view>

  <view class="page-section">
    <view>flex-direction:row</view>
    <view style="display:flex; flex-direction:row"> <!-- 这儿必须使用 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>

  <view class="page-section">
    <view>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>


  <view class="page-section">
    <view>混合使用样式</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>

</view>
index.wxss文件
/**index.wxss**/
.page {
  flex:1;
  background-color: #666;
}

.page-section {
  padding:10px;
  background-color:#fff;
  margin:10px;
}

.flex-item {
  width:100px;
  height:100px;
}
.bc_green {
  background-color: green;
}
.bc_red {
  background-color: red;
}
.bc_blue {
  background-color: blue;
}
最后运行的部分界面
微信小程序View组件和Flexbox弹性盒模型

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND