CSS3Flex布局之-经典两列商品布局

前言

两列布局在移动端应用场景非常多，本文简述用C3如何快速的构建这样的布局

---

首先看下效果

这里是HTML代码部分,用的假数据

<div class="goods-list">
    <div class="goods-item">
        <img src="../../imgs/goodslist/法拉利fxx k 红色跑车.jpg" alt="">
        <h1 class="title">法拉利fxx k 红色跑车</h1>
        <div class="info">
            <p class="price">
                <span class="now">￥999</span>
                <span class="old">￥1299</span>
            </p>
            <div class="sell">
                <span>熱賣中</span>
                <span>剩90件</span>
            </div>
        </div>
        
    </div>

    <div class="goods-item" @click="goDetail">
        <img src="../../imgs/goodslist/劳斯莱斯幻影Rolls-Royce Phantom EWB Chengdu.jpg" alt="">
        <h1 class="title">劳斯莱斯幻影Rolls-Royce Phantom EWB Chengdu</h1>
        <div class="info">
            <p class="price">
                <span class="now">￥999</span>
                <span class="old">￥1299</span>
            </p>
            <div class="sell">
                <span>熱賣中</span>
                <span>剩90件</span>
            </div>
        </div>
        
    </div>

    <div class="goods-item">
        <img src="../../imgs/goodslist/红色劳斯莱斯 Cullinan.jpg" alt="">
        <h1 class="title">红色劳斯莱斯 Cullinan</h1>
        <div class="info">
            <p class="price">
                <span class="now">￥999999</span>
                <span class="old">￥1099999</span>
            </p>
            <div class="sell">
                <span>熱賣中</span>
                <span>剩90件</span>
            </div>
        </div>
        
    </div>

    <div class="goods-item">
        <img src="../../imgs/goodslist/2018奔驰AMG GT蓝色跑车.jpg" alt="">
        <h1 class="title">2018奔驰AMG GT蓝色跑车</h1>
        <div class="info">
            <p class="price">
                <span class="now">￥999999</span>
                <span class="old">￥1099999</span>
            </p>
            <div class="sell">
                <span>熱賣中</span>
                <span>剩90件</span>
            </div>
        </div>
    </div>
</div>

这里是CSS样式代码部分，采用了scss写法点我了解scss

.goods-list{
    display: flex;
    flex-wrap: wrap; //換行
    padding: 7px;
    justify-content: space-between;

    .goods-item{
        width: 49%;
        border:1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        margin: 4px 0;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        img{
            width: 100%;
        }

        .title{
            font-size: 14px;
        }

        .info{
            background-color: #eee;
            p{
                margin: 0;
                padding: 5px;
            }
            .price{
                .now{
                    color: red;
                    font-size: 16px;
                    font-weight: bold;
                }
                .old{
                    font-size: 12px;
                    text-decoration: line-through;
                    margin-left: 10px;
                }
            }

            .sell{
                display: flex;
                justify-content: space-between;
                font-size: 13px;
            }    

        }
    }
}

总结

用C3弹性盒模型实现还是挺简单的，后期做移动端APP和微信小程序时会用到这种布局，届时会再写一写，感谢您的时间。