Flex 布局小技巧

254 阅读1分钟

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 其他浏览器支持的不是很好. 这个种方案算是一个布局小技巧吧, 我个人觉得非常实用