[微信小程序]入门学习知识点_UI布局

工具

• 微信web开发者工具(当前版本0.18.182100)

Flex布局

设置display : flex

• flex-flow

  row(默认行显示)/column(列显示)

  nowarp(默认不自动换行)/warp(自动换行)/reverse(反转,在换行时有效)

  简写示例: flex-flow : row warp

nowarp

warp

• justify-content

  flex-start(默认左对齐)/flex-end(右对齐)/center(居中挨着)/space-around(居中分散)/space-between(两端对齐)

space-around

space-between

• align-items align-self(设置自己的位置)

  flex-start(默认左对齐)/flex-end(右对齐)/center(居中)/baseline(内容在统一水平线上)/stretch(拉伸,需要在item不设置高度时有效)

  ?

flex-start

flex-end

flex-baseline

• flex-grow 有剩余空间时所占比重,默认0

  flex-shirnk无剩余空间时缩放比重,默认1

  flex-basis指定某一元素的大小

  简写示例: flex : 0 1 150rpx;

• order 排列顺序使用

• position

  relative(相对定位)/absolute(绝对定位)

relative

absolute