实现的九宫格效果：

 

 

一、使用

 

.box{

    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/

    display: flex; //将对象作为弹性伸缩盒显示

}

 

 

二、容器属性.box{...}

 

• flex-direction:row|column //默认，主轴水平方向，起点在左端，或者主轴垂直方向，默认在上沿

• flex-wrap:nowrap|wrap //默认不换行，当然你也可以选择换行

• justify-content:flex-start //主轴上的对齐方式，默认左对齐，当然还有flex-end，center等

 

• align-item:stretch //单行交叉轴上的对齐方式，如果项目未设置高度或设为auto，轴线占满整个交叉轴，其他还有flex-start，flex-end，center等

• align-content:stretch //多行交叉轴上的对齐方式，如果项目未设置高度或设为auto，将占满整个容器的高度，前提是有多行，即设置过flex-wrap，其他还有flex-start，flex-end，center等

 

• flex-flow//不用记忆，相当于direction和wrap的默认简写

 

 

三、容器内项目属性.item{...}

• order:0  默认为0，可以是负值 , 数值越小，排列越靠前，

• flex-grow:0 默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。若所有项目的数值都相同，等分剩余空间

• flex-shrink:1   默认值都为1，即如果空间不足将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。负值对该属性无效，容器不应该设置flex-wrap。

• flex-basis:auto  flex-basis是分配多余空间之前项目占据的主轴空间，如果空间不足则默认情况下该项目也会缩小。默认为auto，如果设置数值，设置flex-basis为350px，但空间充足，则显示为350px,如果空间不足，则显示小于设定值

 

• flex:auto  flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto，第一个属性必须，后两个属性可选。可以flex:auto; 代替 flex: 1 1 auto;可以用 flex: none;代替 flex: 0 0 auto；

• align-self：auto    允许单个项目与其他项目有不一样的对齐方式 默认值为auto，表示继承父元素的align-items属性，并可以覆盖align-items属性。align-self: auto | flex-start | flex-end | center | baseline | stretch;

 

 

四、九宫格案例来了解display:flex

 

注意：在pc端可以使用@touchstart和@touchend，效率要比@click高，但是在手机端不能用

 

    <div class="sudoku_row">

        <div class="sudoku_item " :class="curSelect==sudoku.id?'opacity':''   "v-for="(sudoku,index) in sudokus"  :key="index"  @click="start(index)”>

 

            <img :src="sudoku.img_src" width="40" height="40" >

            {{sudoku.name}}

 

        </div>

    </div>

 

 

<script>

import breakfast from '../assets/logo.png';

 

 

export default {

  name: 'HelloWorld',

  data () {

    return {

      sudokus: [

      {

        img_src: breakfast,

        name: 'Breakfast',

        id:0

      },

      {

        img_src: breakfast,

        name: 'Breakfast',

        id:1

      },

      {

        img_src: breakfast,

        name: 'Breakfast',

        id:2

      }

      ],

      curSelect:null

    }

  },

 

  methods: {

        start:function(e){

 

            console.log("点击了按钮")

            var that = this;

            var list = that.sudokus;

            for (var i = 0, len = list.length; i < len; ++i) {

                if (list[i].id == e) {

                    that.curSelect = i;

                    console.log("======" + that.curSelect);

                    that.curSelect= null;

                }

            }

        },

 

  }

 

}

</script>

 

<style scoped>

 

.sudoku_row{

  display: flex;

  align-items: center;

  width:100%;

  flex-wrap: wrap;

}

.sudoku_item{

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  width:25%;

  padding-top: 10px;

  padding-bottom: 10px;

}

.opacity{

  opacity: 0.4;

  background: #e5e5e5;

}

.sudoku_item img{

  margin-bottom: 3px;

  display: block;

}

 

</style>