小程序—view组件—flex布局

html里面的div在小程序里面用view代替。
用flex布局。

.wxml:
<view class='flex-wrap'>
    <view class='a'>aview>
    <view class='b'>bview>
    <view class='c'>cview>
view>

.wxss:
.flex-wrap{
  display: -webkit-flex;//将view组件变为flex这种布局
  flex-direction: column;//默认为横向，可以变为纵向
  height: 1000rpx;//用rpx代替px
}
.flex-wrap view{
  text-align: center;
  font-size: 40rpx;
  line-height: 200rpx;
  color: white;

}
.a{
  background-color: green;
  flex: 1;//重点！flex组件会自动计算所占的比例，进行布局
}
.b{
  background-color: red;
  flex: 1;
}
.c{
  background-color: blue;
  flex: 2;
}