css基础2：flex 多行均分有间隙布局

效果图：

逻辑：一行有四个的情况

父元素：设置为 flex。justify-content 设置 space-between/space-around。

子元素：设置宽度百分比／vw （width:calc((100% - 60px))/4 或者 width:calc((100vw - 100px))/4 )

最后一行不要间距设置 p:nth-child( n + 5 )

代码：

<!DOCTYPE html>

<html>

<head>

</head>

<style>

*{margin: 0;padding:0;}

div{

width: 100%;

height: 100%;

display: flex;

flex-flow: row wrap;

justify-content: space-between;

padding: 20px;

box-sizing: border-box;

}

p {

background: red;

border-radius: 5px;

margin-bottom: 20px;

/* width: calc((100vw - 100px)/4); */

width: calc((100% - 60px)/4);

height: calc((100vh - 60px)/2);

display: flex;

justify-content: center;

align-items: center;

}

p:nth-child(n + 5) {

margin-bottom: 0;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>