先上效果图下面附上代码
<! Doctype html> <html> <head> <meta charset = utf-8> <title> </title> <стиль типа = текст/css> .big {ширина: 100px; рост: 100px; фон: Skyblue; Display: Flex; Margin-top: 20px;}. 5px;}. One {Display: Flex; uslify-content: center;/*交叉轴*/align-items: center;}. Два {дисплей: Flex; uslify-content: пространство; Column; Levify-Content: Space-Between; Align-items: center;}. Четыре {Display: Flex; Justify-Content: Space-Around;}. Four1 {Display: Flex; Justify-Content: Space-Around; Align-Items: Center;}. Four2 {Display: Flex; Flex-Direction: Column-content: Space-Around; flex; uslify-content: space-around;}. Five1 {Display: Flex; Flex-Riection: Column; Justify-Content: Space-Around; Align-Items: Center;}. Five2 {Display: Flex; Flex-riection: ряд; Align-Self: Center;}. Six {Display: Flex; Just-content: Space-around;}. Column; Levify-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 = small> </div> </div> <div = big 2> <div = small> </div> </div> <div> <div> <div> </div> </div> <div> <div> <div> <div> </div> </div> <div> <div> 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: Alled-Self: Diven-end; 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 class = six1> <div class = small> </div> <div class = small> </div> </div> </div> </body> </html>总结到此这篇关于 html 使用栅格布局实现六种筛子的样式的代码详解的文章就介绍到这了, 更多相关 html 栅格布局 内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！