flex 布局 实现电商页面商品展示floor

有了上一篇,对flex的初次使用,心里痒痒的试着,实现了电商首页,商品展示的floor,先看下效果:

要实现首先是对组件构件的拆解,拆解如下:

页面布局如下:

<div class="floor">
    <div class="floor-wrap">
        <div class="floor-first">
            <span class="floor-title">休闲零食</span>
            <span>|</span>
            <span class="floor-title-dec">精选美味 超值好货</span>
        </div>
        <div class="floor-second">
            <div class="floor-second-left">
                <img src="https://img-b2b.gznb.com/b2c/132202877794914304.jpg"/>
            </div>
            <div class="floor-second-right">
                <div class="product-show">
                    <div style="width: 200px;height: 200px">
                        <div class="product-show-pic"
                             style='background-image: url("https://img-b2b.gznb.com/b2c/133315103138254848.jpg")'></div>
                    </div>
                    <div class="product-show-desc">
                        <span class="title" style="font-size: 14px; color: rgb(74, 74, 74);">陕西省宝鸡市灵山薄壳核桃原味500g</span>
                        <span class="price" style="font-weight: 600;">¥23.8 </span>
                    </div>
                    <div class="cart-button">
                        <span>期待上线</span>
                    </div>

                </div>
                <div class="product-show">
                    <div style="width: 200px;height: 200px">
                        <div class="product-show-pic"
                             style='background-image: url("https://img-b2b.gznb.com/b2c/133315103138254848.jpg")'></div>
                    </div>
                    <div class="product-show-desc">
                        <span class="title" style="font-size: 14px; color: rgb(74, 74, 74);">陕西省宝鸡市灵山薄壳核桃原味500g</span>
                        <span class="price" style="font-weight: 600;">¥23.8 </span>
                    </div>
                    <div class="cart-button">
                        <span>期待上线</span>
                    </div>
                </div>
                <div class="product-show">
                    <div style="width: 200px;height: 200px">
                        <div class="product-show-pic"
                             style='background-image: url("https://img-b2b.gznb.com/b2c/133315103138254848.jpg")'></div>
                    </div>
                    <div class="product-show-desc">
                        <span class="title" style="font-size: 14px; color: rgb(74, 74, 74);">陕西省宝鸡市灵山薄壳核桃原味500g</span>
                        <span class="price" style="font-weight: 600;">¥23.8 </span>
                    </div>
                    <div class="cart-button">
                        <span>期待上线</span>
                    </div>
                </div>
                <div class="product-show">
                    <div style="width: 200px;height: 200px">
                        <div class="product-show-pic"
                             style='background-image: url("https://img-b2b.gznb.com/b2c/133315103138254848.jpg")'></div>
                    </div>
                    <div class="product-show-desc">
                        <span class="title" style="font-size: 14px; color: rgb(74, 74, 74);">陕西省宝鸡市灵山薄壳核桃原味500g</span>
                        <span class="price" style="font-weight: 600;">¥23.8 </span>
                    </div>
                    <div class="cart-button">
                        <span>期待上线</span>
                    </div>
                </div>
                <div class="product-show">
                    <div style="width: 200px;height: 200px">
                        <div class="product-show-pic"
                             style='background-image: url("https://img-b2b.gznb.com/b2c/133315103138254848.jpg")'></div>
                    </div>
                    <div class="product-show-desc">
                        <span class="title" style="font-size: 14px; color: rgb(74, 74, 74);">陕西省宝鸡市灵山薄壳核桃原味500g</span>
                        <span class="price" style="font-weight: 600;">¥23.8 </span>
                    </div>
                    <div class="cart-button">
                        <span>期待上线</span>
                    </div>
                </div>
                <div class="product-show">
                    <div style="width: 200px;height: 200px">
                        <div class="product-show-pic"
                             style='background-image: url("https://img-b2b.gznb.com/b2c/133315103138254848.jpg")'></div>
                    </div>
                    <div class="product-show-desc">
                        <span class="title" style="font-size: 14px; color: rgb(74, 74, 74);">陕西省宝鸡市灵山薄壳核桃原味500g</span>
                        <span class="price" style="font-weight: 600;">¥23.8 </span>
                    </div>
                    <div class="cart-button">
                        <span>期待上线</span>
                    </div>
                </div>
                <div class="product-show">
                    <div style="width: 200px;height: 200px">
                        <div class="product-show-pic"
                             style='background-image: url("https://img-b2b.gznb.com/b2c/133315103138254848.jpg")'></div>
                    </div>
                    <div class="product-show-desc">
                        <span class="title" style="font-size: 14px; color: rgb(74, 74, 74);">陕西省宝鸡市灵山薄壳核桃原味500g</span>
                        <span class="price" style="font-weight: 600;">¥23.8 </span>
                    </div>
                    <div class="cart-button">
                        <span>期待上线</span>
                    </div>
                </div>
                <div class="product-show">
                    <div style="width: 200px;height: 200px">
                        <div class="product-show-pic"
                             style='background-image: url("https://img-b2b.gznb.com/b2c/133315103138254848.jpg")'></div>
                    </div>
                    <div class="product-show-desc">
                        <span class="title" style="font-size: 14px; color: rgb(74, 74, 74);">陕西省宝鸡市灵山薄壳核桃原味500g</span>
                        <span class="price" style="font-weight: 600;">¥23.8 </span>
                    </div>
                    <div class="cart-button">
                        <span>期待上线</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

　　样式如下:

 .floor {
            display: flex;
            width: 100%;
            padding-bottom: 60px;
            padding-top: 60px;
            background-color: #f4f4f4;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .floor .floor-wrap {
            /*指定宽度,两边留白*/
            width: 1200px;
            flex:;
            margin: 10px;

        }

        .floor .floor-wrap .floor-first {
            margin-bottom: 15px;
        }

        .floor .floor-wrap .floor-title {
            margin-bottom: 30px;
            letter-spacing: 0.5px;
            font-size: 22px;
            margin: 10px;
        }

        .floor .floor-wrap .floor-title-dec {
            color: #333;
        }

        .floor .floor-wrap .floor-second-left {
            width: 440px;
            height: 520px;
        }

        .floor-second {
            display: flex;
            flex-direction: row;
        }

        .floor .floor-wrap .floor-second-right {
            background: white;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;

        }

        .product-show-desc {
            padding: 10px;
        }

        .product-show-desc span {
            overflow: hidden;
            /*防止商品名称太长,多余的部分用...显示*/
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            width: 180px;
            display: block;
        }

        .product-show-desc .price {
            text-align: center;
            color: red;
        }

        .floor .floor-wrap .floor-second-right .product-show {
            width: 199px;
            height: 259px;
            border: 1px solid #f4f4f4;
            /*商品展示的外边框,统一设置为1px solid,所以紧挨着两个的边框看起来是两像素,为了消灭一个边框,margin统一设置为-1px*/
            margin-right: -1px;
            margin-bottom: -1px;
            margin-top: -1px;
        }

        .product-show-pic {
            width: 80%;
            height: 80%;
            margin: 0px auto;
            padding-top: 5%;
            box-sizing: content-box;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50%;
        }

        .cart-button {
            display: none;
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            overflow: hidden;

            position: relative;
            top: -52px;
            z-index:;

        }

        .cart-button span {
            display: block;
            flex-grow:;
            background: red;
            line-height: 52px;
            height: 52px;
            position: relative;
            top: 52px;

            /*本来是放置加入购物车按钮,鼠标悬浮才展示,默认是在外,被父元素overflow:hidden影藏*/

            text-align: center;
           /*展示动画*/
            transition: .6s;
        }

        .product-show:hover .cart-button > span {
          /*鼠标悬浮,激活动画,展示期待..*/
            position: relative;
            display: block;
            top: 0px;
        }

　      flex 弹性布局,在实现子元素对齐方式,和排列顺序上很方便!