小程序布局相对位置是什么意思?

　　小程序布局相对位置是什么意思?微信小程序布局的过程中，需要设置好小程序标签的固定位置，什么是小程序布局相对位置呢?除了相对位置以外还有局对位置，接下来小编会为大家介绍。

　　小程序布局相对位置是什么意思?

　　相对位置：元素是相对自身进行定位，参照物是自己。

　　绝对位置：元素是相对离它最近的一个已定位的父级元素进行定位

　　小程序布局相对位置：

　　position:relative; /*启用相对定位*/

　　left:150rpx; /*相对于自己往右偏离150*/

　　top:50rpx; /*相对于自己往下偏离150*/

　　小程序布局绝对位置：

　　position: absolute;

　　left: 50rpx;

　　top: 50rpx;

　　(父级元素一定要是已定位)

　　小程序布局相对位置怎么设置?

　　flex-direction(改变轴线方向): row(水平轴线，默认) column(垂直轴线) //这里讲的是比较常用的布局

　　(轴线举例：父级元素使用flex布局，默认布局下块级小程序元素是会换行的，但设置了flex布局后默认就都水平排列了)

　　justify-content: flex-start(居于轴线的开头) center(居于轴线的中间) flex-end(居于轴线的末端) space-around(将子元素按比例排列在轴线上) space-between(将子元素排列在轴线两端)

　　align-items: 同justify-content

　　flex-wrap(规定子元素溢出处理): nowrap(不换行) wrap(顺序换行) wrap-reverse(逆序换行)。微信小程序代码如下：

　　.item1{

　　height:100rpx;

　　width:100rpx;

　　background-color:cyan;

　　border: 1px solid #fff;

　　flex-grow: 1

　　}

　　.i3{

　　flex-grow: 2

　　}

　　微信小程序代码如下：

　　.table {

　　border: 0px solid darkgray;

　　}

　　.tr {

　　display: flex;

　　width: 100%;

　　justify-content: center;

　　height: 3rem;

　　align-items: center;

　　}

　　.td {

　　width:40%;

　　justify-content: center;

　　text-align: center;

　　}

　　.bg-w{

　　background: snow;

　　}

　　.bg-g{

　　background: #E6F3F9;

　　}

　　.th {

　　width: 40%;

　　justify-content: center;

　　background: #3366FF;

　　color: #fff;

　　display: flex;

　　height: 3rem;

　　align-items: center;

　　}

　　小程序布局相对位置是什么意思?小程序布局相对位置怎么设置?以上就是小编对小程序布局相对位置的介绍了，如果你对小程序布局相对位置不了解，以上内容会解决你的问题。请多关注微小乔。

　　微信小程序table布局怎么开发?

　　微信小程序页面排版怎么布局?

　　微信小程序卡片布局怎么做?