題目：用 css 實現如下的多列布局效果：父元素寬度自適應，子元素數量隨機可變的（假如 8 個），每一行有 3 個子元素，子元素之間的水平間距為 10px ，子元素的寬度自適應父元 素的寬度（(父元素寬度 - 10px * 2) / 3），子元素的高度與本身的寬度成正比（比如 2:1 ）
效果如下：
涉及到的知識點：
1.flex布局相關
2.calc計算屬性，（運算符號兩遍要有空格）calc((100% - 10px * 2) / 6)
3. padding和margin的百分比相對的是父元素的寬度
4. :nth-child(3n):不要帶運算符號*
html結構如下：div里面有8個p標簽
<body> <div> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </body>
css如下:
div {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
display: flex;
}
p {
margin-right: 10px;
padding-bottom: calc((100% - 10px * 2) / 6);
border: 1px solid red;
width: calc((100% - 10px * 2) / 3);
margin-bottom: 10px;
}
p:nth-child(3n) {
margin-right: 0px;
}
步驟一：使用flex布局，換行
步驟二：cacl計算出元素的寬度
步驟三：由於最后一行需要左對齊所以最好使用margin-right來控制間距，而不是用justify-content: space-between;
步驟四：使用nth-child讓每行最后一個元素margin-right為0 才不會換到下一行
題目：實現一個對角線布局
效果如下
html：
<body> <div><p></p></div> <div><p></p></div> <div><p></p></div> </body>
css：關鍵點就一個justify-content不同的對齊方式
div {
display: flex;
}
div:nth-child(1) {
justify-content: flex-start;
}
div:nth-child(2) {
justify-content: center;
}
div:nth-child(3) {
justify-content: flex-end;
}
p {
width: 33%;
border: 1px solid red;
padding-bottom: 33%;
}