响应式布局

<div class="Props">
    <ul>
        <li v-for="props in Props" v-on:click="props.show = !props.show">
            <h2>{{props.name}}</h2>
            <h3 v-show="props.show">{{props.position}}</h3>
        </li>
    </ul>
  </div>

   .Props{
       width:100%;
       max-width:1200px;
       margin:40px auto;
       padding:0 20px;
       box-sizing:border-box;
   }
   ul{
       display:flex;
       flex-wrap:wrap;
       list-style-type:none;
       padding:0;
   }
   li{
       flex-grow:1;
       flex-basis:200px;
       text-algin:center;
       padding:30px;
       border:1px solid #222;
       margin:10px;
   }