代码
<template>
<view>
<view class="grid">
<view class="grid-cell">
</view>
<view class="grid-cell">
</view>
<view class="grid-cell">
</view>
</view>
<view class="grid2">
<view class="row test1"></view>
<view class="row"></view>
<view class="row"></view>
<view class="row"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.grid{
width: 100%;
height: 200rpx;
display: flex;
padding: 10rpx;
.grid-cell{
flex: 1;
background-color: red;
border: 1px solid white;
box-sizing: border-box;
}
}
.grid2{
width: 100%;
height: 200rpx;
display: flex;
padding: 10rpx;
.row{
flex: 1;
background-color: yellow;
border: 1px solid black;
box-sizing: border-box;
}
.test1{
flex: 0 0 50%;
}
}
</style>
图示