[Projektrezension-vue2.0] So richten Sie den Inhalt der Box im Flex-Wrap-Layout horizontal und vertikal aus

 Anforderungen: Verwenden Sie v-for, um ein Box-Layout mit zwei Zeilen und zwei Spalten zu implementieren. Die Bilder und der Text in der Box müssen horizontal und vertikal zentriert sein

erreichen:

html:

<div class="container">
    <div v-for="(item,index) in list" :key="index" class="item">
        <img :src="item.src" />
        <div class="title">{
   
   {item.title}}</div>
    </div>
</div>

CSS:

/* scss */
.container {
    display: flex;
    flex-wrap: wrap;
    width: 固定宽度
    
    .item {
        width: 用外层盒子宽度/每行item的个数
        display: flex;
        flex-direction: column;
        align-items: center;

        img: {
            height: 设定高度
        }

        .title {
            /* 文字样式 */
        }

    }

}