专栏首页电光石火微信小程序flex布局

微信小程序flex布局

https://www.cnblogs.com/sun8134/p/6395947.html

微信小程序 View 支持两种布局方式:block 和 flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明:display:flex;

使用 flex 布局,主意,貌似 view 不会自动继承,需要在每个想使用的 view 里都加上。 首先是横向布局和竖向布局,要设置属性 flex-direction ,它有4个可选值:

  • row:从左到右的水平方向为主轴
  • row-reverse:从右到左的水平方向为主轴
  • column:从上到下的垂直方向为主轴
  • column-reverse:从下到上的垂直方向为主轴

设置元素在横向上的布局方向,需要设置 justify-content 属性,它有5个值可选:

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

设置元素在纵向上的布局方向,需要设置 align-items 属性,它有5个值可选:

  • stretch 填充整个容器(默认值)
  • flex-start 侧轴的起点对齐 (这里我们手动设置下子 view 的高度,来看的明显一些)
  • flex-end 侧轴的终点对齐
  • center 在侧轴中居中对齐
  • baseline 以子元素的第一行文字对齐

子 View 还有个属性 align-self,可以覆盖父元素的 align-items 属性,它有6个值可选:auto | flex-start | flex-end | center | baseline | stretch (auto 为继承父元素 align-items 属性,其他和 align-items 一致)

此外还有 flex-wrap 属性,用于控制子 View 是否换行,有3个值可选:

  • nowrap:不换行(默认)
  • wrap:换行
  • wrap-reverse:换行,第一行在最下面

还有子 View 有个 order 属性,可以控制子元素的排列顺序,默认为0。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jdk配置

    1.右键选择 计算机→属性→高级系统设置→高级→环境变量

    似水的流年
  • jdk配置

    变量值:(变量值填写你的jdk的安装目录,例如本人是 E:\Java\jdk1.7.0)

    似水的流年
  • JS数组操作

    1)delete方法:delete arr[1] 这种方式数组长度不变,此时arr[1]变为undefined了,但是也有好处原来数组的索引也保持不变,此时要遍...

    似水的流年
  • Java 基础(三)——集合源码解析 Collection

    前面我们讲到了集合的定义以及集合的 Iterator。我们知道集合分为 Collection和 Map,今天我们的重点是学习 Collection。

    蜻蜓队长
  • PTA刷题记录:L1-033 出生年 (15分)

    题目描述: 以上是新浪微博中一奇葩贴:“我出生于1988年,直到25岁才遇到4个数字都不相同的年份。”也就是说,直到2013年才达到“4个数字都不相同”的要求...

    英雄爱吃土豆片
  • ReactNative布局样式总结

    flex number 用于设置或检索弹性盒模型对象的子元素如何分配空间 flexDirection enum('row', 'row-reverse' ,'c...

    Java中文社群_老王
  • 127个常用的JS代码片段,每段代码花30秒就能看懂(六)

    大家好,今天我继续给大家分享本系列文章的最后一部分,感谢你对本系列文章的持续关注,希望对你的日常工作有所帮助。

    前端达人
  • 生产制造模块

      物料控制(ITM)模块包含用于大多数BAAN_IV模块中与物料有关的基本数据。这个模块包含五类数据:物料定义的缺省设置,物料数据,引起改变的物料,物料代码,...

    Tony老师
  • 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解

    该项目来自于 Github 用户 Chalarangelo,目前已在 Github 上获得了 5000 多Star,精心收集了多达 48 个有用的 JavaSc...

    程序员宝库
  • 数学--数论--欧几里得定理和拓展欧几里得定理

    证明: 我们首先约定:m = gcd(a,b) , n = gcd(b, q) , a = b*p +q。(这里的gcd含义跟上面一样,q的含义跟后面式子同)...

    风骨散人Chiam

扫码关注云+社区

领取腾讯云代金券