Css3 Flex布局

<template>
  <div>
    <div class="all" >
        <div class="info" v-for="(v,k) in userList" :key="i">
          <span>{{v.name}}</span>
        </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      msg: 'Welcome to Index',
      userList: [
        {'name': 'LiKang1'},
        {'name': 'LiKang2'},
        {'name': 'LiKang3'},
        {'name': 'LiKang4'},
        {'name': 'LiKang5'},
        {'name': 'LiKang6'},
        {'name': 'LiKang7'},
        {'name': 'LiKang8'},
        {'name': 'LiKang9'}
      ]
    }
  }
}
</script>

<style scoped>
.all{
  display:flex;
  display: -webkit-flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  background-color: #cccccc;
}
.info{
  width: 49%;
  min-width: 49%;
  max-width: 49%;
  border: 1px blue solid;
  line-height: 50px;
  height: 50px;
  flex: 1;
  margin-bottom: 5px;
  background-color:#42b983;
}
</style>

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 布局，可以简便、完整、响应式地实现各种页面布局