java实现三宫格及其扩展_使用css伪类before／after实现 正方形三宫格、正方形六宫格、正方形九宫格...

结构图解析：

后记

12321

.test-box{

display:flex;

flex-direction: row;

flex-wrap: wrap;

.test-item{

flex:0 0 33.33%;

position: relative;

&::before{

content: ' ';

display:block;

padding-bottom:100%;

}

&:after{

content: ' ';

transform-origin: center;

box-sizing: border-box;

position: absolute;

top:-50%;

left:-50%;

right:-50%;

bottom:-50%;

border-color: #c8c7cc;

border-style: solid;

border-width: 1px;

-webkit-transform: scale(.5);

-ms-transform: scale(.5);

transform: scale(.5);

border-top-width: 0;

border-left-width: 0;

}

}

.test-content{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

}