css基础2：flex 多行均分有间隙布局_flex平均分配中间留有缝

作者：2023面试高手 | 2024-03-15 14:50:27

踩

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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/241957

css基础2：flex 多行均分有间隙布局_flex平均分配 中间留有缝