微信小程序:布局样式

效果

微信小程序:布局样式_第1张图片

wxml


    
    1
    1
    1
    1
    1
    
    
      2
      3
    

wxss

.layout {
  width: 100%;
  display: flex;

}
.left {
  width: 50%;
  background-color: #6ba2e0;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-item1 {
  flex: 1;
  background-color: #8bc34a;
}

.right-item2 {
  flex: 1;
  background-color: #ce8adf;
}

你可能感兴趣的:(微信小程序,微信小程序,notepad++,小程序)