[基础]微信小程序flex布局

布局基础

默认每个View进行垂直布局。每个view占据一行。

平面布局有一个主轴和交叉轴（类似于平面坐标中的X轴和 Y轴）

默认X轴为主轴 Y轴为交叉轴

flex-direction排列方向

row(默认)         column

flex-wrap元素换行问题

nowrap（不换行）         wrap(换行)

wrap-reverse换行反转（多的一行在上面）

flex-flow上面两个的简写

先定义方向  再定义换行

justify-content主轴的对齐元素

center(沿主轴居中对齐)

flex-start（主轴左边、默认方式）      flex-end（主轴右边）

space-around（各个元素平分主轴空间）

space-between元素两端对齐 中间间隔相同

align-items交叉轴的对齐方式

flex-start  flex-end

center

stretch（在元素没有设置高度时占满整个容器的高度）

baseline以元素中的文字的底线进行对齐

flex元素属性 针对于容器内的元素

flex-grow有多余空间时元素的放大比例

设置多个元素之间的比例分析网站元素的放大比例

设置多个元素之间的比例按照比例瓜分剩余空间

flex-shrink空间不足时元素的缩小比例

默认为1表示空间不足时所有元素等比缩小

某元素设置为0时表示不缩小

值越大缩小比例越大。

flex-basis元素在主轴上占据的空间

rpx可能会不生效

flex是上面三者的简称

放大 缩小 空间

order元素排列顺序

根据元素个数数越小越靠前

align-self元素自身的定义方式

利于定义某些特殊元素的布局

相对定位

相对于自身进行定位参照物是自己

绝对定位

是相对于离它最近的已经定位的父级元素进行定位的。