258资源分享网

布局基础

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

flex布局（设置display=flex）

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

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

flex容器属性：针对于容器内的容器

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元素自身的定义方式

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

相对定位

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

绝对定位

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

如果所有父级都没有定位，则相对于整个窗口定位。