flexbox 並べ方

Question

flexboxを利用して、写真名と写真を上下に並べたいのですが、横並びになってしまいます。
写真名と写真を縦に並べたいです。
アドバイスどうかよろしくお願いします。

<template>

  <v-row justify="center">
  <div class="list">
       <div class="title">
         <h2>一覧結果</h2>
       </div>
      <div class="wrapper">    
        <div class="name" > 
          <div class="post_name" v-for="post in posts" >
          　　<div class="box">　<nuxt-link :to="`post/${post.id}`"> 
              {{post.name}}s
              <img v-bind:src="post.path" class="image"></nuxt-link>
              </div>
          </div>
        </div>
      </div> 
  </div>    
  </v-row>
  
</template>

<script>
import axios from 'axios';
export default {
  created(){
  axios.get(`http://127.0.0.1:8000/api/category/${this.$route.params.id}`)
          .then(response => {
          this.posts= response.data.posts
          
          this.id = response.data.id
          this.name= response.data.name
          this.path = response.data.path
          console.log(response.data)
          });
          
  },
  data () {
    return {
     params:'',
     posts:[],
     post:[],
     id:'',
     name:'',
     content:'',
     path:'',
    }
  },
  methods: {
    returnPage() {
      this.$router.go(-1);
    },
    
  },
  }

</script>
<style scoped>
.list{
  text-align:center;
}

.post_name{
  top:10%; 
  width:50%;
  display:flex;  
} 
  

.name{
     width:50%;
     height:50%;
     padding-left:20px;
     display:flex;
     flex-direction: column;   
}
.name img{
  position:relative;
  top:40%;
  width:50%;
}
.wrapper{
  width: 200%;
  display:flex;
}

 body{
 background-color:#0F0;
 }
 
 
 </style>

Answer 1

以下を追加するとどうですか？

.box a { /* nuxt-link が a要素に展開される場合 */
	display: flex;
	flex-direction: column;
}

蛇足ですが、ご提示のコードに全角スペースが混入していますので、思わぬ表示になることもあるかと思います。ご注意ください。

Comments

[退会済みユーザー]

回答ありがとうございます????‍♂️
指摘していただいた通りに修正したら、縦並びになりました。