九宫格菜单布局

 <div class="province1">
        <div class="pro-item" v-for="i in 9" :key="i">
          {{i}}
        </div>
</div>


 .province1{
   display: flex;
   flex-flow: row wrap;
   align-items: stretch;
   align-content: stretch;
   padding: 20px 20px;
   width: 100%;
   height: 560px;
   background:#fff;
   margin-top:20px;
   border-radius: 5px;
  .pro-item{
   flex: 1 30%;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
  }
   .pro-item:nth-child(3n) {
       border-right:none;
    }
  }

　　

转载于:https://www.cnblogs.com/bbldhf/p/11471414.html