微信小程序> 微信小程序view布局(换行等)

微信小程序view布局(换行等)

浏览量:8257 时间: 来源:暴怒大吊

flex-direction: 多个元素时决定是元素排列横向还是竖向 

 1row:从左到右的水平方向为主轴(默认值)

 2row-reverse:从右到左的水平方向为主轴

 3column:从上到下的垂直方向为主轴

 4column-reverse:从下到上的垂直方向为主轴

justify-content: 多个元素之间的对齐方式是在横向上做改变

 1flex-start:主轴起点对齐(默认值)

 2flex-end:主轴结束点对齐

 3center:在主轴中居中对齐

 4space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等

 5space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同

align-items: 多个元素之间的对齐方式是在纵向上做改变

 1stretch 填充整个容器(默认值)

 2flex-start 侧轴的起点对齐 (这里我们手动设置下子 view 的高度,来看的明显一些)

 3flex-end 侧轴的终点对齐

 4center 在侧轴中居中对齐

 5baseline 以子元素的第一行文字对齐

flex-wrap: 多个元素之间是否自动换行

  1nowrap:不换行(默认)

  2wrap:换行

  3wrap-reverse:换行,第一行在最下面

order: 可以控制子元素的排列顺序,默认为0


 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎