【发布时间】：2020-02-01 18:08:25
【问题描述】：
我创建了一个按钮来隐藏页面上除一个之外的其他组件，然后将左侧的组件展开，然后将其移至中心。 然而不知何故，在单击按钮后，组件并没有在中心对齐。
这里是 codepen 的当前行为。
new Vue({
el: '#app',
data: () => ({
lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`,
show1: true,
show2: true,
show3: true,
show4: true,
show5: true,
expand1:true
}),
methods: {
hideothers() {
this.show2=!this.show2,
this.show3=!this.show3,
this.show4=!this.show4,
this.show5=!this.show5,
this.expand1=!this.expand1
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-sm>
<v-layout row wrap>
<!-- top starts here-->
<v-flex d-flex xs12 sm4 child-flex>
<v-card color="orange lighten-2" tile flat v-show="show1">
<v-card-text>Card 1</v-card-text>
<v-btn flat @click="hideothers()">Expand</v-btn>
<v-card-text>
<v-expand-transition>
<div v-show="expand1">This is a short paragraph</div>
</v-expand-transition>
<v-expand-transition>
<div v-show="!expand1">
<p>A looooong</p>
<p>paragraph</p>
</div>
</v-expand-transition>
</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex xs12 sm4 child-flex>
<v-fade-transition>
<v-card color="orange lighten-2" tile flat v-show="show2">
<v-card-text>
<v-layout row wrap>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-fade-transition>
</v-flex>
<v-flex d-flex xs12 sm4>
<v-card color="red lighten-2" dark tile flat v-show="show3">
<v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
</v-card>
</v-flex>
<!-- TOP part ends here-->
<v-flex d-flex xs12 sm4 child-flex>
<v-card color="purple lighten-1" tile flat v-show="show4">
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 sm4 child-flex v-show="show5">
<v-card color="green lighten-2" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>【问题讨论】：
-
正如我在下面的回答中所示，如果其他元素的子元素刚刚隐藏，您将无法在 flex 容器中居中元素。您必须将 v-show 替换为 v-if 并将它们放入 v-flex 中。同样要在 flex 容器中居中内容，您需要打开 v-layout 的 justify-center 属性
-
如果扩展卡片组件，则不需要将其水平居中。您要么希望扩展它，要么将其以容器的 1/3 宽度居中
标签： javascript css vue.js vuetify.js