实现的九宫格效果：

element ui 布局九宫格 vue实现九宫格_vue

 

 

一、使用

 

.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>