先上效果圖下面附上代碼
<!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柵格佈局，希望大家以後多多支持武林網！ ，希望大家以後多多支持武林網！