微信小程序开发之——flex布局（附源码下载）

打开微信小程序开发工具，新建Hello word项目，删除掉无用的代码。

flex-direction

flex-direction属性表示布局的方向 有两个值： row | column 默认属性是row 行布局

html代码如下：

<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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

效果图：

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

flex-direction: column效果图： 

justify-content

justify-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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

效果图： 

flex-end | center | space-between | space-around 值同理 

align-items

align-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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

效果图： 

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

效果图： 

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 邀请

  路过

  雷人

  握手

  鲜花

  鸡蛋

  原作者: 模板之家 来自: 网络收集
  上一篇：github精选：微信小程序入门简要教程

  下一篇：从零入门系列《一》安装工具及项目的创建

  全部回复(0)

  相关分类

  • 小程序开发
  • php教程
  • mysql教程
  • js教程
  • 服务器运维
  • 经验杂谈
  • linux命令

  推荐阅读

  • mysql分页操作
  • update是什么关键字
  • MySQL错误1171如何解决
  • 深入理解MySQL数据类型：探索基本数据类型的细节和限制
  • 快速掌握MySQL常用数据类型：常见数据类型及其应用场景一览
  • 了解MySQL的主要数据类型：熟悉常用的数据类型有哪些

  • 首页

  • 分类

  • 索引

  • 我的

  Copyright © Comsenz Inc. Powered by Discuz!X3.5 蜀ICP备12013697号

  微信：xu08290201 QQ：75283535
  返回顶部