flex列表数据超出换行

1.html部分

 <div  class="place_all">
        <div class="list_margin">
            <div class="zl_place_list">
                <img
                    class="place_img"
                    src=""
                    alt=""
                    srcset=""
                />
                <div class="place_text">
                    <span class="name">上海陶艺工艺美术博物馆</span>
                    <span class="address">杨浦区-专业摄影地</span>
                    <span class="price">面议</span>
                </div>
            </div>

            <div class="zl_place_list">
                <img
                    class="place_img"
                    src=""
                    alt=""
                    srcset=""
                />
                <div class="place_text">
                    <span class="name">上海陶艺工艺美术博物馆</span>
                    <span class="address">杨浦区-专业摄影地</span>
                    <span class="price">面议</span>
                </div>
            </div>

            <div class="zl_place_list">
                <img
                    class="place_img"
                    src=""
                    alt=""
                    srcset=""
                />
                <div class="place_text">
                    <span class="name">上海陶艺工艺美术博物馆</span>
                    <span class="address">杨浦区-专业摄影地</span>
                    <span class="price">面议</span>
                </div>
            </div>
            <div class="zl_place_list">
                <img
                    class="place_img"
                    src=""
                    alt=""
                    srcset=""
                />
                <div class="place_text">
                    <span class="name">上海陶艺工艺美术博物馆</span>
                    <span class="address">杨浦区-专业摄影地</span>
                    <span class="price">面议</span>
                </div>
            </div>
             <div class="zl_place_list">
                <img
                    class="place_img"
                    src=""
                    alt=""
                    srcset=""
                />
                <div class="place_text">
                    <span class="name">上海陶艺工艺美术博物馆</span>
                    <span class="address">杨浦区-专业摄影地</span>
                    <span class="price">面议</span>
                </div>
            </div>
        </div>
    </div>

2.css部分

.place_all {
    margin-top: 150px;
    .list_margin{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .zl_place_list {
        width: 387px;
        height: 380px;
        background: #ffffff;
        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.07);
        border-radius: 14px;
        margin-right: 18px;
        margin-bottom: 18px;
        .place_img {
            width: 100%;
            height: 291px;
            border-radius: 14px 14px 0px 0px;
            object-fit: cover;
        }
        .place_text {
            display: flex;
            flex-direction: column;
            padding: 21px 15px;
            position: relative;
            .name {
                font-size: 16px;
                font-weight: 500;
                color: #333333;
                line-height: 22px;
                letter-spacing: 1px;
            }
            .address {
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                line-height: 20px;
                padding-top: 5px;
            }
            .price {
                font-size: 16px;
                font-weight: 500;
                color: #d70603;
                line-height: 22px;
                letter-spacing: 1px;
                position: absolute;
                right: 15px;
            }
        }
    }
    }

    .zl_place_list:nth-child(3n){  //一行显示3个就为3n
			/* 尽量让item在list中居中,两边都没有margin */
			margin-right: 0;
		}
    
    .list_margin:after{
		content: "";
		flex: auto;
	}
}


版权声明:本文为mmd1234520原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。