前端项目实战3：如何让card自动排列开？

flex布局详解

如何实现如下布局？

<section class="main" id="main">
        <div class="content">
            <!-- 如果要做成一张张可点击的小卡片，就需要用a包裹图片和字 -->
            <a href="#"><div class="jingdian"><img src="images/gulangyu.jpg" alt=""><span>鼓浪屿</span></div></a>
            <a href="#"><div class="jingdian"><img src="images/xijie.jpg" alt=""><span>泉州西街</span></div></a>
            <a href="#"><div class="jingdian"><img src="images/qingyuanshan.jpg" alt=""><span>清源山</span></div></a>
            <a href="#"><div class="jingdian"><img src="images/kaiyuansi.jpg" alt=""><span>开元寺</span></div></a>
            
            <a href="#"><div class="jingdian"><img src="images/gulangyu.jpg" alt=""><span>鼓浪屿</span></div></a>
            <a href="#"><div class="jingdian"><img src="images/xijie.jpg" alt=""><span>泉州西街</span></div></a>
            <a href="#"><div class="jingdian"><img src="images/qingyuanshan.jpg" alt=""><span>清源山</span></div></a>
            <a href="#"><div class="jingdian"><img src="images/kaiyuansi.jpg" alt=""><span>开元寺</span></div></a>
        </div>
    </section>

.main .content{
    /* 不设置这个容器的大小，让它随flex撑开 */
    /* 1.设置为flex布局 */
    display: flex;
    /* 2.一行放不下，自动换行 */
    flex-wrap: wrap;  
    /* 在主轴方向上————space-between */
    justify-content: space-between;

}

.main .content .jingdian {
    /* 给card设置背景颜色为全白 */
    background-color: #fff;
    /* 使图片和文字为上下关系并垂直居中对齐，所以使用flex布局 */
    display: flex;
    /* 设置主轴方向为垂直 */
    flex-direction: column;
    /* 在与主轴方向垂直的方向,设置为居中,使文字在图片下方正中央 */
    align-items: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}
.main .content .jingdian img{
    width:27.5rem ;
    height: 18.5rem;
    margin-bottom: 2rem;
}

.main .content .jingdian span{
    font-size: 2rem;
    color: #000;
}

 重点：

点击整张card即可跳转链接，所以用a标签包裹住图片和文字。

大局：

设置display: flex;

设置flex-wrap: wrap;  

设置justify-content: space-between;

card：

设置display: flex;

设置flex-direction: column;

设置align-items: center;