Понимание структуры проекта Vue (vuetify)

Question

Я новичок в Vue и Vuetify, я просто пытаюсь выяснить структуру, которую я должен иметь при написании своего кода. Я начинаю немного путаться с различиями между v-layout и v-flex.

Вот моя текущая структура: я пытаюсь расположить flex xs8 (с типом комнаты) рядом с flex xs2 (с абзацем '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

Если вы хотите, чтобы какие-либо элементы отображались рядом (встроенно), поместите их внутрь 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

Компонент тега <v-layout> просто представляет гибкий блок (в основном, div с правилом display: flex; CSS).

Компоненты тегов <v-flex>, которые вы помещаете внутри тега <v-layout>, являются элементами вашего flexbox (те, которые вы можете настроить "поведение роста / сжатия" с помощью правила flex CSS)

Вот и все.