电光石火电光石火

陌晴博客
ilkhome.cn

微信小程序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。

本博客所有文章如无特别注明均为原创。作者:似水的流年
版权所有:《电光石火》 => 微信小程序flex布局
本文地址:http://ilkhome.cn/index.php/archives/710/
欢迎转载!复制或转载请以超链接形式注明,文章为 似水的流年 原创,并注明原文地址 微信小程序flex布局,谢谢。

评论