Question

我是Vue和Vuetify的新手，我只是想弄清楚编写代码时应具有的结构。我开始对v-layout和v-flex之间的差异感到困惑。

这是我当前的结构：我正在尝试将flex xs8（具有房间类型）放置在flex xs2（具有“测试”段落）旁边。

<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>标签组件仅表示弹性框（基本上是具有display: flex; CSS规则的div）。

放置在<v-flex>标记内的<v-layout>标记组件是flexbox的元素（您可以使用flex CSS自定义“增长/收缩行为”的元素）规则）

就是这样。

Answer 2

如果您希望任何元素并排（内联）显示，请将它们放在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>

了解Vue项目的结构（vuetify）

2 个答案: