先上效果图下面附上代码
<！Doctype html> <html> <head> <meta charset = utf-8> <title> </title> <title> <style type = text/css> .big {width：100px; height：100px; clayblue; skyblue; display：flex; margin-top：20px;} .small {wid; heigh：10px; height; 5px;}。1つの{display：flex; justify-content：center;/*交叉轴*/align-items：center;}。2{display：flex; justify-content：space-around; align-items：center;}。 flex; flex-direction：column; justify-content：space-bet-wethe-bet-betwetems：center;}。4{display：flex; justify-content：space-around;}。41{flex; justify-content：space-around; align-items：center;}。42{flex; rflex-difround：column; center;}。5 {display：flex; justify-content：space-around;}。51{display：flex; flex-direction：column; justify-content：space-around; align-items：center;}。 flex;flex-direction: column;justify-content: space-around;align-items: center;}</style></head><body><div class=big one><div class=small></div></div><div class=big two><div class=small></div><div class=small></div></div><div class=big two2><div class=small></div><div class = small> </div> </div> <div class = big three> <div class = lign-self：flex-start;> </div> <div class = lign-self：center;> </div> <div class = align-self：flex-end;> </div> </div> div clash; </div> div-class = div class 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 5> <div class = 51> <div class = small> </div> <div class = small> </div> </div> <div class = 52> <div class = small> </div> <div class = 51> <div> </div> <div class = small> </div> </div> div div class = viv> <6 class = small> </div> <div class = small> </div> </div> <div class = 61> <div class = small> </div> <div class = small> </div> <div class = small> div> </div> </div> < class = small> </div> <div class = small> </div> </div> <div class = 61> <div class = small> </div> <div class = small> </div> </div> </div> </body> </html>总结html使用栅格布局实现六种筛子的样式的代码详解的文章就介绍到这了、更多相关html栅格布局、希望大家以后多多支持武林网！