Expand card component and center it after hiding other components in Vuetify

Question

I created a button that hides other components on the page except one and then the one that is left is expanded and then it should be moved to the center. However somehow the component is not aligning itself in the center after clicking on the button.

Here is codepen with the current behaviour.

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>

Answer 1

Try ou this :

<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 :justify-center="!expand1">
<!-- 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-if="show2">
           <v-fade-transition>


          <v-card color="orange lighten-2" tile flat>
            <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-if="show3">
          <v-card color="red lighten-2" dark tile flat>
            <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-if="show4">
          <v-card color="purple lighten-1" tile flat>
            <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>

Answer 2

Basically change the following line

<v-flex xs12 sm4 child-flex v-show="show2" :class="{ 'd-flex': show2 }">

Apply d-flex class only when its shown and also hide this div when the parameter is false

Also add justify-content: center CSS to the wrapper of all the 5 divs

See the updated 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
    }
  }
})

.custom-class {
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.22/dist/vuetify.min.css">

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap :class="{ 'custom-class': !show2 }">
<!-- top starts here-->
        <v-flex d-flex xs12 sm4 child-flex v-show="show1">
          <v-card color="orange lighten-2" tile flat > 
            <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 xs12 sm4 child-flex v-show="show2" :class="{ 'd-flex': show2 }">
           <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 xs12 sm4 v-show="show3" :class="{ 'd-flex': show3 }">
          <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 xs12 sm4 child-flex v-show="show4" :class="{ 'd-flex': show4 }">
          <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"  :class="{ 'd-flex': show2 }">
          <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>

Answer 3

You can bind the required widths md4 and md12 to whether it is expanded or not. Like this: <v-flex d-flex xs12 :sm4="expand1" :sm12="!expand1" child-flex>

see the pen