先上效果图下面附上代码
<!DOCTYPE html><html><head><meta charset=UTF-8><title></title><style type=text/css>.big {width: 100px;height: 100px;background: skyblue;display: flex;margin-top: 20px;} .small {width: 10px;height: 10px;background: purple;border-radius: 5px;}。一个{显示：flex; jusify-content：中心;/*交叉轴*/align-items：center;}。两个{display：flex; flex; jusify-content：pass-inoude：space-around; align-items; align-items：center;}。two2 {twip2 {twip2 {display：flex-drive; flex-drifection; flex-dirt; flex-columpife; flex-colunify; flex; flex方向：列;正当：之间：空间范围；偏好;中心;}。四{display：flex; jusify; jusify-content：space-around;}。four;}。four;}。 center;}.five {display: flex;justify-content: space-around;}.five1 {display: flex;flex-direction: column;justify-content: space-around;align-items: center;}.five2 {display: flex;flex-direction: row;align-self: center;}.six {display: flex;justify-content: space-around;}.six1 {display: flex; flex方向：列;正当符合：空间范围; Align-Items：中心;} </style> </head> </head> <身体> <body> <body> <div class = big One> <div class = class = small> </div> </div> </div class class class = big二> <big二> <div clasc class=small></div></div><div class=big three><div class=small style=align-self: flex-start;></div><div class=small style=align-self: center;></div><div class=small style=align-self: flex-end;></div></div><div class=big three><div class=small style=align-self: flex-end;></div><div class=small style=align-self: center;></div><div class=small style=align-self: flex-start;></div></div><div class=big four><div class=four2><div class=small></div><div class=small></div></div><div class=four2><div class=small></div><div class=small></div></div></div><div class=big five><div class=five1><div class=small></div><div class=small></div></div><div class=five2><div class=small></div></div><div class=five1><div class=small></div><div class=small></div></div></div><div class=big six><div class=six1><div class=small></div><div class=small></div><div class=small></div></div><div class=six1><div class=small></div><div class=small></div><div class=small></div></div></div><div class=big six><div class=six1><div class=small></div> <div class=small></div></div><div class=six1><div class = small> </div> <div class = small> </div> </div> </div> <div class = six1> <div class = small> </div> </div> <div class = small> </div> </div> </div> </div> </div> </div> </div> </hody> </html>总结到此这篇关于html使用栅格布局实现六种筛子的样式的代码详解的文章就介绍到这了，更多相关html栅格布局，希望大家以后多多支持武林网！，希望大家以后多多支持武林网！