uni-app flex兩欄布局

 

 

<template>
    <view class="recommended">
        <view class="card">
            <view class="card-item"></view>
            <view class="card-item"></view>
            <view class="card-item"></view>
        </view>
    </view>

 

<style lang="less" scoped>
    page {
        background-color:  #EFEFEF;
    }
    .recommended {
        .card {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0;
            padding: 0 20rpx;
            box-sizing: border-box;
            .card-item {
                width: 48%;
                height: 700rpx;
                border: 1px solid red;
                margin-top: 20rpx;
            }
        }
    }
</style>