微信小程序之横向布局与纵向布局

一、效果图：

二、代码：

wxml：

  
    
      box1
      box2
    
    
    
      box1
      box2
    

wxss：

/* 横向布局 */
.row{
  width: 100%;
  height: 400rpx;
  background-color: cyan;
  display: flex;
  /*row 横向  column 列表  */
  flex-direction: row;
  /* 左右居中 */
  justify-content: center;
  /* 上下居中 */
  align-items: center;
}
/* 纵向布局 */
.column{
  margin-top: 200rpx;
  width: 100%;
  height: 400rpx;
  background-color: cyan;
  display: flex;
  /*row 横向  column 列表  */
  flex-direction: column;
  /* 上下居中 */
  justify-content: center;
  /* 左右居中 */
  align-items: center;
}
.box1{
  width: 100rpx;
  height: 100rpx;
  background-color: red;
}
.box2{
  width: 100rpx;
  height: 100rpx;
  background-color: rgb(0, 174, 255);
}