flex两栏布局

<template>
    <view class="app">
        <view class="guess-you-like-list">
            <view class="guess-you-like-item" v-for="(item, index) in guessYouLikeList" :key="index">
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                // 猜你喜欢
                guessYouLikeList: [
                    {title: '古黛妃 短袖t恤女夏装2019新款韩版宽松'},
                    {title: '潘歌针织连衣裙'},
                    {title: '巧谷2019春夏季新品新款女装'},
                    {title: '私萱连衣裙'},
                    {title: '娇诗茹 ulzzang原宿风学生潮韩版春夏短'},
                    {title: '古黛妃 短袖t恤女夏装2019新款韩版宽松'},
                ]
            }
        }
    }
</script>

<style lang="less">
    .app {
        margin-top: 1rem;
    }
    .guess-you-like-list {
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        .guess-you-like-item {
            width: 48%;
            height: 5rem;
            border: 1px solid yellow;
        }
    }
</style>

 

posted @ 2020-03-05 13:24  本溢  阅读(833)  评论(0)    收藏  举报