* { margin:0; padding:0; } html,body { background-color:#000; height:100%; } .box { height:100%; display:flex; justify-content:center; align-items:center; } .item { border:2px solid #fff; border-radius:10px; background-color:#fff; width:80px; height:80px; box-shadow:0px 5px 0px 1px #BEBEBE; margin:20px 20px; padding:10px; } .item .point { width:18px; height:18px; border-radius:18px; background-color:#000; } .box .item:nth-child(1) { display:flex; justify-content:center; align-items:center; } .box .item:nth-child(2) { display:flex; justify-content:space-between; } .box .item:nth-child(2) .point:nth-child(2) { align-self:flex-end; justify-self:flex-end; } .box .item:nth-child(3) { display:flex; justify-content:space-between; } .box .item:nth-child(3) .point:nth-child(2) { align-self:center; } .box .item:nth-child(3) .point:nth-child(3) { align-self:flex-end; } .box .item:nth-child(4) { display:flex; /* flex-wrap:wrap; */ justify-content:space-between; } .box .item:nth-child(4) .pointBox:nth-child(2),.box .item:nth-child(4) .pointBox:nth-child(1) { display:flex; flex-direction:column; justify-content:space-between; } .box .item:nth-child(5) { display:flex; justify-content:space-between; } .box .item:nth-child(5) .pointBox:nth-child(3),.box .item:nth-child(5) .pointBox:nth-child(1) { display:flex; flex-direction:column; justify-content:space-between; } .box .item:nth-child(5) .pointBox:nth-child(2) { align-self:center; } .box .item:nth-child(6) { display:flex; flex-direction:column; flex-wrap:wrap; justify-content:space-between; align-content:space-between; } .box .item:nth-child(6) .pointBox { height:100%; display:flex; flex-direction:column; justify-content:space-between; }
更新时间:2020-10-09 01:01:00