Web開發(fā)中經(jīng)常需要進(jìn)行頁面布局,CSS技術(shù)可以實現(xiàn)各種各樣的頁面布局,例如兩行三列布局。
以下是一個簡單的兩行三列布局代碼:
.container { display: flex; flex-wrap: wrap; } .item { flex: 0 1 calc(33.33% - 20px); margin: 10px; height: 100px; }
上述代碼中的.container是容器元素,使用了flex布局,并設(shè)置了flex-wrap屬性,使得子元素(即.item元素)可以在同一行內(nèi)排列,超出容器寬度時會自動換行。
每個.item元素的flex屬性設(shè)置為0 1 calc(33.33% - 20px),表示在同一行內(nèi)等分三份,每個元素占據(jù)1份,同時可以根據(jù)容器尺寸自適應(yīng)伸縮,其中calc()函數(shù)用于計算元素寬度,減去20px的原因是考慮到間距的影響。
最后,設(shè)置每個.item元素的margin和height屬性即可實現(xiàn)完整的兩行三列布局效果。