微信小程序CSS语法

指定容器为flex容器(display: flex),容器可以嵌套使用;容器里面的元素为flex元素;


一,flex容器属性详解
1) flex-flow: 是 flex-direction 和 flex-wrap的简写,语法;flex-flow: row   wrap;
    flex-direction: 决定元素的排列方向(默认主轴为横向排列: row,交叉轴为:column)
    flex-wrap: 决定元素在主轴排列不下时,如何换行: nowrap , wrap,  wrap-reverse;
    
2) justify-content: 元素在主轴上的对齐方式( flex-start(默认),flex-end,center,space-around,space-between )

3) align-items: 元素在交叉轴的对齐方式; ( flex-start(默认),flex-end,center,stretch(当元素没有设置高度时,自动占满容器高度),baseline(以元素里面一行文字为对齐方式) )


二,flex元素属性详解
1) flex:是 grow、shrink、basis的简写
    flex-grow:当空间有多余时,元素的放大比例,默认0不放大,放大的比例占多余空间的几分之几
    flex-shrink:当空间不足时,元素的缩小比例,默认1等比缩小,设置为0则不进行缩小,缩小的比例占多余空间的几分之几
    flex-basis:元素在主轴上占据的空间,可能不支持rpx
    
2) order:定义元素在主轴方向的排列顺序,从小到大

3) align-self:定义元素自身的对齐方式


三,相对定位和绝对定位
相对定位的元素是相对于自身进行定位,参照物是自己;  position: relative; left: 50 rpx; top: 50rpx;
绝对定位的元素是相对于 离它最近的一个已定位的父级元素进行定位 position: absolate

你可能感兴趣的:(Web,前端)