【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高，但是在手机端不能用

 

    

        

            {{sudoku.name}}