CSS3中引入的彈性盒子布局(Flex布局),可以讓我們輕松地實現響應式設計和適應不同設備的頁面布局。以下是使用CSS3 Flex屬性來制作一個骰子的示例。
.container { display: flex; flex-wrap: wrap; width: 200px; height: 200px; border: 1px solid #888; } .box { flex-grow: 1; border: 1px solid #333; } .box:nth-child(1) { background-color: red; } .box:nth-child(2), .box:nth-child(3) { background-color: green; } .box:nth-child(4) { background-color: yellow; } .box:nth-child(5), .box:nth-child(6) { background-color: blue; }
在這里,我們使用Flex容器的“flex-wrap”屬性將Flex容器內的任何項目自動換行到下一行。每個Flex項目都被指定為“flex-grow:1”,以便根據可用的空間均分。而Flex項目的背景顏色則由“:nth-child(1)”選擇器分別進行選擇。
在HTML中,只需在“container”類中嵌套“box”類即可創建六個具有帶有不同背景顏色的小盒子。
這樣就創建了一個簡單的CSS3骰子,可通過更改Flex容器的寬度和高度來輕松地調整大小和重置布局。