Understanding the Stucture of a Vue Project (vuetify) - vue.js

Question

I'm new to Vue and Vuetify, I'm just trying to figure out the structure I should have when writing my code. I'm starting to get a bit confused with the differences between v-layout and v-flex.
Here is my current structure: I'm trying to position the flex xs8 (with the room type) next to the flex xs2 (with paragraph 'test').
<v-container ma-6 grid-list-xl>
<v-layout>
<v-flex md8 xs12>
<!-- My spaces -->
<v-layout v-for="space in spaces" v-if="space.id === selected" :key="space.id" row wrap>
<!-- The rooms -->
<v-flex v-for="room in space.rooms" :key="room.id" xs12 md6>
<!-- A room -->
<v-card class="card-round">
<!-- Image -->
<v-carousel>
<v-carousel-item v-for="image in room.images" :src="image.src" :key="image.id"></v-carousel-item>
</v-carousel>
<!-- Information -->
<v-layout row wrap>
<v-card-text primary-title>
<v-flex xs8>
<p> {{ room.type }} </p>
<h3 class="headline"> {{ room.name }} </h3>
</v-flex>
<v-flex xs2>
<p>test</p>
</v-flex>
</v-card-text>
</v-layout>
</v-card>
</v-flex>
</v-layout>
</v-flex>
<v-flex hidden-md-and-down>
<p>temp sidebar</p>
</v-flex>
</v-layout>
</v-container>

Answer 1

If you want any elements to be displayed side by side (inline), put them inside v-layout
<v-layout>
<v-flex xs8>
<p> {{ room.type }} </p>
<h3 class="headline"> {{ room.name }} </h3>
</v-flex>
<v-flex xs2>
<p>test</p>
</v-flex>
</v-layout>

Answer 2

The <v-layout> tag component just represent the flex box (basically, a div with a display: flex; CSS rule).
The <v-flex> tags components that you put inside the <v-layout> tag are the elements of your flexbox (the ones that you can customize the "grow/shrink behavior" with the flex CSS rule)
That's it.