Flex 布局之主角不是我
虽然是flex布局但是主角却是 css选择器 :nth-child();
这是一个浏览器不支持 grid 布局 的替代方案
.flex {
display: flex;
}
.flex {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.flex li {
width: 32.5%;
height: 180px;
line-height: 180px;
margin-right: 15px;
}
/* 从第二行元素开始 */
.flex li:nth-child(n + 4) {
margin-top: 15px;
}
/* 每行最后一个元素 */
.flex li:nth-child(3n) {
margin-right: 0;
}
Grid布局虽然好,但是除了 chrome, firefox 其他浏览器支持的不是很好. 这个种方案算是一个布局小技巧吧, 我个人觉得非常实用